HTML更改换行触发? [英] HTML change line break trigger?
问题描述
在 CSS/HTML 中有什么方法可以更改哪些字符会导致文本中的换行符被允许?例如,如果我有包含文本fooooooo/barrrrrrrrr"的表格数据,它不会分成两行,但如果它包含fooooooo barrrrrrrrr",它会.
Is there any way in CSS/HTML to change what characters cause linebreaks in text to be allowed? For example if I have table data containing the text "fooooooo/barrrrrrrrr" it won't get split on two lines, but if it contains "fooooooo barrrrrrrrr" it will.
有没有办法在可以触发换行的地方添加标点符号?
Is there a way to add punctuation characters to what can trigger line break?
推荐答案
在 CSS/HTML 中无法更改导致、允许或防止文本换行的字符集.但是,每个字符的出现都可能影响这些事情.也就是说,您不能笼统地说允许在‘/’之后换行",但您可以在特定出现的/"之后注入一些标记或内容,以允许在那里换行.
It is not possible in CSS/HTML to change the set of characters that cause, allow, or prevent linebreaks in text. However, it is possible to affect such things per each occurrence of a character. That is, you cannot say in general "linebreak after ‘/’ is allowed", but you can inject some markup or content after a particular occurrence of "/" to allow a line break there.
请注意,浏览器具有不同的换行行为.例如,Opera 将斜杠/"视为允许在其后换行.行为也可能取决于上下文.请参阅我关于浏览器中的换行的页面.
Note that browsers have different line breaking behavior. For example, Opera treats the slash "/" as allowing a line break after it. The behavior may also depend on the context. See my page on line breaking in browsers.
对于任何知道实用方法并且不太担心标准化者不愿意接受它的人来说,想法曾经很简单:<wbr>
标签.它仍然是简单实用的方法,例如fooooooo/
,但它不再是最跨浏览器的方式了.较新的方式,零宽度空间 U+200B,在 HTML 中可以写成 ​
,在现代浏览器上运行良好,但在一些旧版本的 IE 上,它创建了一个混乱(出现此控制字符的地方会显示一个小矩形).
Thinks used to be simple, to anyone who knew the practical method and wasn’t too worried about the reluctance of standardizers to accept it: the <wbr>
tag. It is still the simple practical way, e.g. fooooooo/<wbr>barrrrrrrrr
, but it isn’t the most cross-browser way any more. The newer way, the zero-width space U+200B, which can be written as ​
in HTML, works well on modern browsers, but on some old versions of IE, it creates a mess (a small rectangle is displayed where this control character appears).
如果您愿意使用有点冗长的代码,可以将两种方式结合起来.您将同时使用 <wbr>
和具有空内容但零宽度空间作为生成内容的内联元素.这避免了 IE 6 上的问题,因为它不支持 CSS 中的生成内容(但可以识别
标记).示例:
If you are willing to use somewhat verbose code, you can combine the two ways. You would use both <wbr>
and an inline element with empty content but with zero-width space as generated content. This avoids the problem on IE 6, as it does not support generated content in CSS (but recognizes the <wbr>
markup). Example:
fooooooo/<wbr><a class=wbr></a>barrrrrrrrr
带有 CSS 代码
.wbr:after { content: " 0200B"; }
测试和演示:jsfiddle.
这篇关于HTML更改换行触发?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!