3

考虑以下代码：

<u> test </u>

这仅强调 test + test 之后的空格，而不是之前的空格。为什么会这样，我怎样才能让它也强调第一个空格？

4

3 回答 3

8 
<u>&nbsp;test&nbsp;</u>

或者

u {
    white-space:pre;
}

jsFiddle 示例

您可以在http://www.w3.org/TR/CSS2/text.html#propdef-white-space阅读有关如何折叠（或删除）空间的所有信息

于 2013-09-17T19:26:39.773 回答
2

这是因为所有的空白都会折叠成一个空白。尝试删除<u>标签前面的任何空格。像这样的东西：

Some<span style='text-decoration: underline;'> underlined </span>text<br>

和一个演示：http: //jsfiddle.net/8J2ZE/

顺便说一句，您应该使用 css 来实现样式，而不是标记

于 2013-09-17T19:31:31.607 回答
1

该行为取决于浏览器（Chrome 在单词后的空格下划线），并且似乎没有在规范中规定。元素内容被解析并存储到包含空格的 DOM 中，但它可能不参与诸如下划线之类的事情。

使用不间断空格代替空格往往会导致下划线，但它会更改内容并具有副作用（例如，不间断空格会防止前后换行）。

设置white-space: pre似乎会导致下划线，尽管在未来的浏览器中没有逻辑上的理由，也不能保证它会。（请注意，将空白折叠为单个空格与渲染单个空格的问题完全不同。）

结论取决于上下文和需要这种下划线的原因。也许您可以使用底部边框（具有明确定义的渲染规则）而不是下划线 - 请注意边框位于较低的位置，这可能合适也可能不合适（另一方面，您可以设置颜色，边框的粗细和样式）。例如，

<span style="border-bottom: solid 1px"> test </span>
于 2013-09-17T20:17:44.577 回答