Question

快速方案说明：

在客户的电子商务网站上工作，该网站与eBay，亚马逊和其他网站挂钩，这意味着他们必须遵守其产品的某些命名惯例......

......打破了自己网站的外观和感觉。因此，他们的一些产品被命名为：＆＃34;男装产品红色和黑色＆绿色＆amp;蓝色＆黄色......＆＃34;

（不要问为什么，我也不明白为什么）

这让我头疼，他们在Grid中设计了他们的产品列表。

所以我想知道，我是否可以创建一个简单的CSS规则来仅在＆符号上打破此字符串？

使用word-break: break-all;显然有效，但它也会打破我们真正不想要的词。我只想打破他们坚持要求的可怕颜色串。

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&amp;blue&amp;pink&amp;green trainers 319986- Light Blue">Nike Air Max 1 Premium black&amp;blue&amp;pink&amp;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;
}

Answer 1

不幸的是，目前CSS中没有办法调整换行规则，例如，指定在文本中出现的某个字符后允许换行符。这样的设置很可能属于CSS的范围，但是没有定义或公共草案可以解决这些问题。

换行机会可以用不同的方式表示，但它们目前都需要修改文本或标记。基本方法是控制字符ZERO WIDTH SPACE（U + 200B），它是一个标准的Unicode字符，以及<wbr>标记，它是一个非标准但广泛支持的HTML标记。它们都表明了突破性的机会。在它们之间进行选择有点困难，因为HTML页面上的line breaking issue很棘手。在实践中，如果我们可以忽略IE 6，U + 200B效果很好，因为我们现在大部分时间都可以。

最好在服务器端插入U + 200B字符（或<wbr>标签），但可以使用客户端代码添加它们。正如您所说的页面使用jQuery，当插入初始化代码以在页面加载时执行时，以下应该处理该问题：

$('.product-name a').html(function(index, html){
  return html.replace(/&amp;/g, '&amp;\u200B');
});

在这里，我天真地假设所涉及的元素是嵌套在类a中的元素内的product-name元素，如示例中所示。如果情况更复杂，请根据需要调整选择器.product-name a。在内容中每次出现＆符号“＆amp;”后，此代码只会插入U + 200B。我假设在之后打破并且在需要时是所需的行为;如果您想在之前打破，只需将'&\u200B'更改为'\u200B&'。

Answer 2

<强> Demo

伪元素生成内容中的\A escape sequence。

CSS

.break:before {
    content:"\A";
    white-space:pre;
}

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>

CSS只能在某个角色上打破一条线？

2 个答案: