0

我需要确定足以显示可能包装的动态 HTML 字符串的最小宽度。没有自动换行，这很简单：创建 a 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？

4

4 回答 4

1

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

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

Afaik 没有通用的方法可以在 html/js 中获得你想要的东西（如果你使用的是 flash 之类的东西，那就不同了）。

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

另一种方法是使用画布对象，但您可能不会在那里得到准确的结果，因为现在影响浏览器中文本渲染的因素太多（字体、大小、字距调整、跟踪......）

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

编辑：所以它不仅在评论中，还有另一个解决方案：

以宽度 1px 开始你的容器，然后增加宽度，每次检查高度；当高度减小时，后退一步，你就得到了你的宽度。最简单的实现将使用 1px 增加/1px 减少，但您当然可以将其优化为使用类似于二进制搜索算法的东西，例如从 1px 开始，然后 2px，然后增加 4px，然后相同的向后，然后再次向前等等直到你有一个 1px 步长的结果。但这只是在 1px inc/dec 解决方案太慢的情况下；）

于 2013-09-30T14:51:30.903 回答
1

使用 CSSword-break规则：

word-break CSS 属性用于指定如何（或是否）在单词中换行。

正常
使用默认的换行规则。
break-all
可以在非 CJK（中文/日文/韩文）文本的任何字符之间插入分词符。
keep-all
不允许 CJK 文本的分词。非 CJK 文本行为与正常情况相同。

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

（来源）

于 2013-09-30T14:44:53.663 回答
0

尝试使用word-break属性。

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

于 2013-09-30T14:46:32.737 回答
0

你应该试试： 

word-break: break-all;

把它添加到CSS这个小提琴中，或者在这里阅读。

于 2013-09-30T14:44:39.473 回答