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

Question

快速方案说明:

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

......打破了自己网站的外观和感觉.因此,他们的一些产品被命名为:"男装产品红色和黑色和绿色和蓝色和黄色......"

(不要问为什么,我不明白为什么)

这让我头疼,他们在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页面上的换行问题很棘手.在实践中,如果我们可以忽略IE 6,那么U + 200B效果很好,因为我们现在大部分时间都可以.

优选地,U + 200B字符(或<wbr>标签)应该在服务器端插入,但是它们可以添加客户端代码.正如您所说的页面使用jQuery,当插入初始化代码以在页面加载时执行时,以下应该处理该问题:

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

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

Answer 2

演示

伪元素生成内容中的\A 转义序列。

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>

在这里阅读更多

使用 content

演示 2

html

<p class="break">Menswear Product Item Red</p>

css

.break:after {
    content:"\A &Black \A &Green \A &Blue \A &Yellow ";
    white-space: pre;
}

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;
}