考虑以下代码:
<u> test </u>
这仅强调 test + test 之后的空格,而不是之前的空格。为什么会这样,我怎样才能让它也强调第一个空格?
<u> test </u>
或者
u {
white-space:pre;
}
您可以在http://www.w3.org/TR/CSS2/text.html#propdef-white-space阅读有关如何折叠(或删除)空间的所有信息
这是因为所有的空白都会折叠成一个空白。尝试删除<u>
标签前面的任何空格。像这样的东西:
Some<span style='text-decoration: underline;'> underlined </span>text<br>
和一个演示:http: //jsfiddle.net/8J2ZE/
顺便说一句,您应该使用 css 来实现样式,而不是标记
该行为取决于浏览器(Chrome 在单词后的空格下划线),并且似乎没有在规范中规定。元素内容被解析并存储到包含空格的 DOM 中,但它可能不参与诸如下划线之类的事情。
使用不间断空格代替空格往往会导致下划线,但它会更改内容并具有副作用(例如,不间断空格会防止前后换行)。
设置white-space: pre
似乎会导致下划线,尽管在未来的浏览器中没有逻辑上的理由,也不能保证它会。(请注意,将空白折叠为单个空格与渲染单个空格的问题完全不同。)
结论取决于上下文和需要这种下划线的原因。也许您可以使用底部边框(具有明确定义的渲染规则)而不是下划线 - 请注意边框位于较低的位置,这可能合适也可能不合适(另一方面,您可以设置颜色,边框的粗细和样式)。例如,
<span style="border-bottom: solid 1px"> test </span>