CSS CSS仅在某个字符上换行？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24488950/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS to break a line only on a certain character?
提问by Reverend2100
Quick scenario explanation:
快速场景说明：
Working on a client's eCommerce site that hooks into eBay, Amazon, and others, meaning that they have to adhere to certain naming convention for their products...
在客户的电子商务网站上工作，该网站与 eBay、亚马逊和其他网站挂钩，这意味着他们必须遵守其产品的某些命名约定......
...which breaks their own website's look and feel. So some of their products are named thus: "Menswear Product Item Red&Black&Green&Blue&Yellow..."
...这打破了他们自己网站的外观。所以他们的一些产品被命名为：“男装产品项目红&黑&绿&蓝&黄......”
(don't ask why, I don't understand why either)
（不要问为什么，我也不明白为什么）
This is causing me headaches with styling their products list in Grid.
这让我在 Grid 中设计他们的产品列表时感到头疼。
So I want to know, can I create a simple CSS rule to break this string ONLY on the ampersand character?
所以我想知道，我可以创建一个简单的 CSS 规则来仅在 & 字符上打破这个字符串吗？
Using word-break: break-all;obviously works, but it also breaks words we really don't want it to. I just want to break up the horrible colour string they insist they need.
使用word-break: break-all;显然是有效的，但它也会破坏我们真的不想要的词。我只是想打破他们坚持需要的可怕的颜色字符串。
HTML:
HTML：
<h2 class="product-name">
<a href="http://www.xxxx.com/nike-air-max-1-premium-black-blue-pink-green-trainers-319986-light-blue.html" title="Nike Air Max 1 Premium black&blue&pink&green trainers 319986- Light Blue">Nike Air Max 1 Premium black&blue&pink&green trainers 319986- Light Blue</a>
</h2>
CSS
CSS
.product-name a {
float: left;
font-family: 'Lato', Helvetica, sans-serif;
font-size: 13px;
line-height: 15px;
min-height: 55px;
text-align: right;
width: 90%;
color: #999;
text-transform: uppercase;
border-right: 10px solid #BEDB39;
padding-right: 4px;
word-break: break-all;
}
回答by Jukka K. Korpela
Unfortunately, there is currently no way in CSS to tune line breaking rules by specifying, for example, that a line break is permitted after a certain character wherever it appears in the text. Such settings would well be within the scope of CSS, but there is no definition or public draft that would address such issues.
不幸的是，目前在 CSS 中没有办法通过指定，例如，在文本中出现的某个字符之后允许换行来调整换行规则。这样的设置很可能在 CSS 的范围内，但没有定义或公共草案来解决这些问题。
Line breaking opportunities can be indicated in different ways, but they all currently require a modification of the text or the markup. The basic methods are the control character ZERO WIDTH SPACE (U+200B), which is a standard Unicode character, and the <wbr>tag, which is a nonstandard but widely supported HTML tag. They both indicate a line breaking opportunity. It is a bit difficult to choose between them, since the line breaking issueon HTML pages is tricky. In practice, U+200B works well if we can ignore IE 6, as we mostly can these days.
可以以不同方式指示换行机会，但它们目前都需要修改文本或标记。基本方法是控制字符 ZERO WIDTH SPACE (U+200B)，这是一个标准的 Unicode 字符，和<wbr>标签，这是一个非标准但广泛支持的 HTML 标签。它们都表明了一个断线机会。在它们之间进行选择有点困难，因为HTML 页面上的换行问题很棘手。在实践中，如果我们可以忽略 IE 6，U+200B 工作得很好，就像我们现在大多数情况一样。
Preferably, U+200B characters (or <wbr>tags) should be inserted server-side, but they can be added with client-side code. As you are saying that the page uses jQuery, the following should handle the issue, when inserted into the initialization code to be executed upon page load:
最好<wbr>在服务器端插入U+200B 字符（或标签），但可以使用客户端代码添加它们。正如您所说的页面使用 jQuery，当插入到要在页面加载时执行的初始化代码时，以下内容应该可以处理这个问题：
$('.product-name a').html(function(index, html){
return html.replace(/&/g, '&\u200B');
});
Here I am naively assuming that the elements involved are aelements nested inside an element in class product-name, as in the example. Tune the selector .product-name aas needed if the situation is more complex. This code simply inserts U+200B after each occurrence of an ampersand “&” in the content. I'm assuming that breaking afteran ampersand when needed is the desired behavior; should you wish to break beforeit, just change '&\u200B'to '\u200B&'.
在这里，我天真地假设所涉及的a元素是嵌套在 class 元素内的元素product-name，如示例中所示。.product-name a如果情况更复杂，请根据需要调整选择器。此代码只是在内容中每次出现“&”后插入 U+200B。我假设在需要时在＆符号后中断是所需的行为；如果您想在它之前中断，只需更改'&\u200B'为'\u200B&'。
回答by 4dgaurav
The \Aescape sequencein the pseudo-element generated content.
伪元素生成内容中的\A转义序列。
CSS
CSS
.break:before {
content:"\A";
white-space:pre;
}
HTML
HTML
<p>Menswear Product Item Red
<span class="break">&Black</span>
<span class="break">&Green</span>
<span class="break">&Blue</span>
<span class="break">&Yellow</span>
</p>
Using the content
使用 content
html
html
<p class="break">Menswear Product Item Red</p>
css
css
.break:after {
content:"\A &Black \A &Green \A &Blue \A &Yellow ";
white-space: pre;
}
Okies, this is what required without changing the HTML and using only css
Okies，这是不需要更改 HTML 并仅使用 css 所需要的
.product-name a:before {
content:"Nike Air Max 1 Premium black \A Black \A Green \A Blue \A Yellow ";
white-space: pre;
font-size:18px;
}
.product-name a {
text-indent:-9999px;
font-size:0;
text-decoration: none;
}
