Question

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

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

如果将显示更改为“inline”，则包装有效，但内联元素的宽度不能为。

使用字母间距而不是宽度可能就足够了，但我需要计算类似的东西：

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

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

事物的html /文本方面无法轻易修改（例如添加手动换行符和设置css nowrap等解决方案），它由单独的服务发送，因此需要对其进行任何处理。

注意：字体必须是Arial，所以不是固定宽度的字体，我需要支持IE8 +

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

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

Answer 1

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

以下是一个示例：http://jsfiddle.net/TGZ3K/4/

注意我添加了一些JS来添加我所指的SPAN元素，然后在这些spans上使用.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;
}

<强>更新

要支持或等嵌套代码，您可以执行以下操作：

$('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标记包含在反对的标记中。 E.g。

一些文字

变成：

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

然后旧的正则表达式使用空格将HTML转换为：

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

然后我们用一个开头开始我们的HTML字符串，并结束带有结束标记的HTML字符串：

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

将会创建额外的，但它们不应该混淆HTML的流程。

内联块元素的断字

1 个答案: