0

这似乎是一个奇怪的要求，但我需要设置单个字符的宽度，并让它们在流动段落中表现得像普通文本一样。这是一个例子：

http://jsfiddle.net/TGZ3K/8/

除了丑陋之外，这很好，除了在包装时单词被分成两半。关于如何解决这个问题的任何想法？

如果将显示更改为“内联”，则换行会起作用，但不能为内联元素指定宽度。

使用字母间距而不是宽度可能就足够了，但我需要计算如下：

width = letter-spacing - (actual character width as rendered)

但同样，获得内联元素的实际宽度似乎很棘手。

事物的 html/text 方面不容易修改（例如，添加手动换行符和设置 css nowrap 等解决方案），它是由单独的服务发送的，因此它的任何处理都需要自动化。

注意：字体必须是Arial，所以不是等宽字体，需要支持IE8+

编辑：抱歉，它需要支持内部格式化标签，如 strong 或 em（更新示例）。这在 letteringjs 中通常不支持，所以我使用这个 fork 来防止这些标签被剥离：

https://github.com/maranomynet/Lettering.js/blob/master/jquery.lettering.js

4

1 回答 1

1

如果将每个单词包装在一个<span />元素中，则可以white-space:nowrap在这些跨度上进行设置，并且跨度内的文本不会在单词中间换行，整个单词都会换行。

这是一个例子：http: //jsfiddle.net/TGZ3K/4/

注意我添加了一些 JS 来添加我所指的 SPAN 元素，然后.lettering()在这些跨度上使用该方法。我必须更新 CSS 才能正常工作。

更新了 JS

$('p').html('<span>' + $("p").text().replace(/\s/g, '</span> <span>') + '</span>').children().lettering();

更新的 CSS

p span {
    white-space:nowrap;
}

p span span {
    display: inline-block;
    width: 10px;
}

更新

要支持嵌套标签，<b />或者<em />您可以执行以下操作：

$('p').html('<span>' + $("p").html().replace(/\s/gi, '</span> <span>').replace(/(<b>|<em>)/gi, '</span>$1<span>').replace(/(<\\b>|<\\em>)/gi, '</span>$1<span>') + '</span>').find("span").lettering();

打开和关闭 HTML 标签被包裹在相反的<span />标签中。例如

一些文字

变成：

</span><b><span>some text</span></b><span>

然后旧的正则表达式对空格执行相同的操作，将 HTML 转换为：

</span><b><span>some</span> <span>text</span></b><span>

然后我们以开始标签开始我们的 HTML 字符串，并以结束<span />标签结束 HTML 字符串：

<span></span><b><span>some</span> <span>text</span></b><span></span>

会有额外<span />的 s 被创建，但它们不应该与 HTML 的流程混淆。

于 2013-09-24T17:30:34.933 回答