如何使用 CSS 在字符串输入后添加换行符

Question

我正在我的网站上开设一家 Ecwid 商店。

有一个“SKU”字符串输入字段，我们应该在其中为“SKU”字符串声明一个名称。我们只需在输入字段中输入我们的字符串。

我希望它是 2 个短语，而不是 SKU 使用 1 个单词，所以我的 SKU 字符串将是这样的：

黄色和蓝色，红色和黑色

但是，我希望 SKU 在网站中显示时带有换行符。所以在网站上应该是这样的：

黄色和蓝色，

红色和黑色

似乎我们无法在输入字段中输入代码，它看起来就像纯文本一样。也许我没有尝试断行的正确代码，但似乎我必须做些别的事情来实现这一点。

但是，我们确实能够为 SKU 创建自定义 CSS。但我不知道如何使用 CSS 给 SKU 字符串添加换行符。

SKU 的默认代码如下：

/* 产品 sku */

div.ecwid-productBrowser-sku {

字体：普通 13px tahoma、geneva、verdana、sans-serif；

颜色：#1e2c38;

自动换行：断字；

}

span.ecwid-productBrowser-sku-value {

显示：内联块；

}

有自定义 CSS 代码或在字符串字段中输入代码以使字符串有断线的想法吗？

请帮忙，我已经联系了 Ecwid 团队，但他们花费的时间太长。

非常感谢！

Answer 1

我不相信仅使用 css 是不可能的。除非您能够在其中一个元素周围包裹某种标签。任何标签都可以（<b>、<i> 等）。

如果你想用 jQuery 实现同样的目标，你可以这样做：

http://jsfiddle.net/Sg5BB/35/

var test = $('.test').text();
var result = test.replace(/,/g,',<br/>');   

$('.test').html(result);

希望对您有所帮助。