java - 计算浏览器文本布局

标签 java javascript css gwt

我想提前确定浏览器如何在面板上换行。我假设如果我知道每个单词在给定面板上显示的宽度(以像素为单位)以及面板的宽度,我就可以计算出将在特定行上显示多少个单词。

我有一个单词数组。对于每个单词,我首先获取像素宽度 (GWT):

storeWidths(HorizontalPanel hp)   {
for(int i=0; i<words.size(); i++) {
Label l = new Label(words.get(i));
hp.add(l);
Integer width = hp.getOffsetWidth();
wordWidths.add(width);
hp.remove(l);
}

当我得到合理的值时,这个函数似乎起作用了。请注意,传入的 Horizo​​ntalPanel 已设置样式并添加到根面板。

有了每个单词(和空格)的像素宽度,然后我尝试确定给定行上适合多少个单词。

显示面板为 306 像素宽。

下面的数据显示了一行计算。第一列是可用的水平像素数,从 306 开始。第二列是单词的宽度(以像素为单位)。第三列是实际的单词。据此,我应该能够在用完水平空间之前将单词“一”到“九”放在一行中:

  • 306 56 1个
  • 250 24 两个
  • 226 33 三
  • 193 26 四
  • 167 25 五
  • 142 21 六
  • 121 39 七
  • 82 32 八
  • 50 28 九

(请注意,我将文本添加到一个 HTML 对象,该对象与我上面的 storeWidths() 函数使用的面板具有相同的样式。第一个单词有 25 像素的缩进,包含在 56 像素内。)

我的问题是浏览器显示的文字消耗的像素比我计算的要多。浏览器在 HTML 面板中仅显示“一”到“七”。浏览器的自动换行算法一定有其他一些我不知道的因素。我需要的是一个可靠的算法来确定单词在浏览器中的换行位置。

最佳答案

继续将单词一个接一个地添加到隐藏的 FlowPanel 中。一旦面板高度发生变化,最后一个字就放不下了。

关于java - 计算浏览器文本布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24811967/

相关文章:

javascript - 如何向图表添加线条

javascript - 使用按钮选择带有数据表的特定行

javascript - 在 Javascript 中组合两个正则表达式

html - 单击卡片时打开链接

java - newScheduledThreadPool(1) 和 newSingleThreadScheduledExecutor() 的区别

java - 出于 "sequentially"要求输入的目的部分提交表单

java - 使用 Rest 客户端的 Elasticsearch 批量插入

java - Jest 客户端支持集群名称吗?

html - 在保持内容定位的同时将动画设置为零

html - 如何实现jsp浏览器 Action