用css遇到一些字符后转到新行

Question

我在CSV电子表格中有这样的内容：

<p>Features:• first feature• second feature• third feature• fourth feature• and so on (the totale feature number it's variable)</p>

我希望每个功能都在新行上插入任何HTML 标记，如下所示：

特点：
•第一个特征
•第二个特征
•第三个特征
•第四个特征
•依此类推（总变量的特征数是变量）

可以用CSS来实现这个结果吗？！

（允许使用javascript）

感谢。

Answer 1

在我看来，最好的解决方案是涉及服务器端脚本，解析和更改标记的结构。使用给定的结构，单独使用CSS对于实现结果是没有用的。

无论如何，如果javascript是一种可接受的方法，你可以在插入段落后进行这样的简单替换：

示例 http://codepen.io/anon/pen/qoCGI

var par = document.getElementsByTagName('p')[0];
par.innerHTML = par.innerHTML.replace(/•/g, "<br />•");

如果您还有其他无法识别的字符，请使用安全范围的unicode序列，如此

par.innerHTML = par.innerHTML.replace(/[\u017C-\uFFFF]+/g, "<br />•");

---

<强>结果

Answer 2

CSS真的不可能。正如其他人所说，你应该使用<li>标签。这就是他们创造的目标。

我能看到的唯一纯CSS解决方法是这样的：

<style>
 p {
  white-space: pre;
 }
</style>

<p>Features:
• first feature
• second feature
• third feature
• fourth feature
• and so on (the totale feature number it's variable)
</p>

Answer 3

CSS是一种样式文档，用于格式化页面上元素的外观。 HTML是一种标记文档，用于格式化页面上显示的实际项目。

虽然在某些方面类似，但两者应该分开。看来你想要的是改变项目在页面上的显示方式。正如评论中所提到的，您正在寻找组织标签，以便在添加新行时进行排序，或者如何在页面上进行文本制动。这可以使用几个不同的标记在HTML中完成：<h#>标记，<br>标记，<p>标记以及上面提到的列表元素<ol> / {{1} }和他们的容器标签<ul>

在这种情况下，看起来你想要格式化列表，所以最佳做法是使用列表标签：

<li>