html - 控制使用 css columns 属性设置样式的文本

Question

成分:一个 div 包含一些我们不知道长度的文本。我们对文本的了解只是它包含一些关键字，例如 'mango'，并且这些关键字必须放在新列的开头(比如那些关键字是字幕).

问题:有没有办法用 HTML5 + CSS3 实现这个目标(最好不使用 JS、jQuery 或一些基于脚本的补丁)?

实际情况(DEMO):

div {
  columns: 2;
  width: 100%;
  height: auto;
}

<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud MANGO ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

编辑:为了更好地理解这个问题，我添加了注释，我们对将要显示的文本一无所知。因此它可能包含关键字(在本例中为mango)或不包含。问题的目的是如何控制将要显示的文本。

Answer 1

这是一种方法，其中替换大写单词，以便将它们连同其后续文本一起包装在一个元素中。

有了它，您还可以处理 2 个单词并获得 3 列等。

window.addEventListener("load", function() {
  var div = document.querySelector('div');
  div.innerHTML = '<span>' + div.innerHTML.replace(/(\b[A-Z]+\b)/g, '</span><span>$1') + '</span>'
});

div {
  -webkit-columns: 2;
  -moz-columns: 2;
  columns: 2;
  width: 100%;
  height: auto;
}

div span {
  display: block;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}

<div>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud MANGO ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
  reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

---

如果您遇到浏览器支持问题，这里有一个 Flexbox 版本

window.addEventListener("load", function() {
  var div = document.querySelector('div');
  div.innerHTML = '<span>' + div.innerHTML.replace(/(\b[A-Z]+\b)/g, '</span><span>$1') + '</span>'
});

div {
  display: flex;
  width: 100%;
  height: auto;
}

div span + span {
  margin-left: 10px;
}

<div>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud MANGO ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

---

这是一个表格版本

window.addEventListener("load", function() {
  var div = document.querySelector('div');
  div.innerHTML = '<span>' + div.innerHTML.replace(/(\b[A-Z]+\b)/g, '</span><span>$1') + '</span>'
});

div {
  display: table;
  width: 100%;
  height: auto;
}
div span {
  display: table-cell;
}

<div>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud MANGO ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

---

如果您想设置样式和/或将大写单词单独放在一行中，您只需将其包裹一个额外的元素 '</span><span><span>$1</span>'

window.addEventListener("load", function() {
  var div = document.querySelector('div');
  div.innerHTML = '<span>' + div.innerHTML.replace(/(\b[A-Z]+\b)/g, '</span><span><span>$1</span>') + '</span>'
});

div {
  -webkit-columns: 2;
  -moz-columns: 2;
  columns: 2;
  width: 100%;
  height: auto;
}

div span {
  display: block;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}

div span span {
  /* display: inline-block;       uncomment this to avoid new line  */
  color: orange;
  font-weight: bold;
  font-style: italic;
}

<div>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud MANGO ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
  reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>