Question

成分：一个div包含一些我们不知道其长度的文字。我们对文字的了解只是它包含一些关键字，例如'mango'，这些关键字必须放在新列的开头（就像那些关键字是字幕）。

问题：有没有办法用HTML5 + CSS3实现这一目标（最好而不使用JS，jQuery或一些基于脚本的补丁）？

实际情况（DEMO）：

＆＃13;

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

＆＃13;

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

＆＃13;

编辑：为了更好地理解这个问题，我添加了一条说明，即我们对将要显示的文字一无所知。因此可能包含关键字（在这种情况下为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>

控制使用css columns属性

1 个答案: