CSS打破一行只在某个字符？ [英] CSS to break a line only on a certain character?
问题描述
快速场景解释：
在客户的电子商务网站上工作，这个网站与eBay，亚马逊和其他公司挂钩，这意味着他们必须遵守某些命名约定产品...
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...
...打破了自己网站的外观和感觉。因此，他们的一些产品被命名如此：男装产品项目红&黑&绿&蓝&黄...
...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.
所以我想知道，我可以创建一个简单的CSS规则来打破这个字符串只在&符号上吗？
So I want to know, can I create a simple CSS rule to break this string ONLY on the ampersand character?
使用 word-break：break-all; 显然有效，但它也打破了我们真正不想要的单词。
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.
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
.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;
}
推荐答案
在CSS中通过指定例如在某个字符之后允许换行符，无论它出现在文本中何处，来调整换行规则。这样的设置将完全在CSS的范围内，但没有定义或公共草案来解决这些问题。
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.
换行机会可以用不同的方式表示，但是它们目前都需要修改文本或标记。基本方法是控制字符ZERO WIDTH SPACE（U + 200B），它是一个标准的Unicode字符，< wbr> 标签，支持的HTML标签。他们都表明了破产机会。由于 HTML页面上的换行问题是有点难以在它们之间进行选择，因此棘手。在实践中，如果我们可以忽略IE 6，U + 200B工作得很好，因为我们大多数可以这些天。
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 issue on HTML pages is tricky. In practice, U+200B works well if we can ignore IE 6, as we mostly can these days.
最好是U + 200B字符（或< wbr> 标签）应该插入服务器端，但可以添加客户端代码。正如你所说的页面使用jQuery，以下应该处理这个问题，当插入到页面加载时执行的初始化代码：
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:
$('.product-name a').html(function(index, html){
return html.replace(/&/g, '&\u200B');
});
这里我假设所涉及的元素 a 元素嵌套在类 product-name 中的一个元素中，如示例所示。如果情况更复杂，请根据需要调整选择器 .product-name a 。此代码在内容中每次出现&后简单地插入U + 200B。我假设在< em>之后打破< em>在需要时是期望的行为;如果您希望在之前破解，只需将'& amp; \\\'更改为'\\\& ; amp;'。
Here I am naively assuming that the elements involved are a elements nested inside an element in class product-name, as in the example. Tune the selector .product-name a as 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 after an ampersand when needed is the desired behavior; should you wish to break before it, just change '&\u200B' to '\u200B&'.
这篇关于CSS打破一行只在某个字符？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
