Question

我需要确定足以显示可能包装的动态HTML字符串的最小宽度。如果没有自动换行，这很简单：创建span，设置其innerHTML并阅读offsetWidth。但是，我不确定如何强制换行...我看到的最简单的不完整方法是用<br/>替换所有空格，但是行不仅可以包裹在空格上，还可以包含在空格中。连字符。

所以，基本上，我想要一个浏览器来布局......像

Max.
word-
wrapped
string
<----->

屏幕外某处测量最长字的宽度。是否有通用的方法来做到这一点？

修改

即，没有换行：

function computeWidth (str) {  // code to make it off-screen and caching omitted
    var span = document.createElement ('span');
    document.body.appendChild (span);
    span.innerHTML = str;
    return span.offsetWidth;
}

我如何编写一个类似的函数来强制str上的换行符，大概是在玩span.style？

Answer 1

使用CSS word-break规则：

word-break CSS属性用于指定如何（或如果）断开单词中的行。

<强>正常
  使用默认换行符规则   的盈亏所有
   对于非CJK（中文/日文/韩文）文本，可以在任何字符之间插入单词分隔符   的保所有
  不允许CJK文本的分词。非CJK文本行为与正常情况相同。

<p style="word-break:break-all;"> Max.word-wrapped string<-----> </p>

（source）

Answer 2

你应该尝试：

word-break: break-all;

将其添加到此fiddle中的CSS，或阅读here。

Answer 3

尝试使用分词属性。

更多信息：http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_word-break

Answer 4

您可以使用CSS work-break / word-wrap并以编程方式插入软连字符（，但我建议您阅读有关软连字符的跨浏览器问题，因为那里很多 - 我通常使用unicode进行软打击（U + 00AD），但你的里程可能会有所不同），然后使用范围对象和测量左边的光标偏移来确定javascript的宽度。

我建议使用软连字符，因为即使是相同的浏览器通常也会根据操作系统/使用哪个字典（在OSX上）来区分不同的字。如果这对您来说不是问题，那么您可以在没有软连字符的情况下进行此操作。

Afaik没有泛型方式来获取你想要的html / js（如果你使用的是闪存，那就不一样了。）

范围对象： https://developer.mozilla.org/en-US/docs/Web/API/range

另一种方法是使用canvas对象，但是你可能无法得到精确的结果，因为现在浏览器中的文本呈现有太多因素（字体，大小，字距调整，跟踪......）< / p>

另一种方法是使用<pre>标签/ whitespace: pre-wrap，将字体设置为您通常使用的字体，然后通过插入换行符或从另一个span / div /中复制它们来模拟断字无论使用自动换行设置 - 我还没有测试过这个，但如果它有效，它可能比使用范围对象迭代更容易。

编辑：这样不仅仅是在评论中，还有另一种解决方案：

启动宽度为1px的容器，然后增加宽度，每次检查高度;当高度降低时，返回一步，你就得到了你的宽度。最简单的实现将使用1px增加/ 1px减少，但您当然可以优化它以使用诸如二进制搜索算法之类的东西，例如，从1px开始，然后是2px，然后4px增加，然后相同向后，再向前，依此类推，直到你得到1px步的结果。但这只是在1px inc / dec溶剂太慢时才会发生;）

如何强制浏览器尽可能打破文本？

4 个答案: