Возьмите под контроль текст, стилизованный с помощью атрибута css columns
Ингредиенты: div
содержащий некоторый текст, длина которого мы не знаем. Что мы знаем о тексте, так это то, что он содержит несколько ключевых слов, 'mango'
например, и эти ключевые слова должны быть помещены в начале нового столбца (например, эти ключевые слова являются субтитрами).
Вопрос: есть ли способ достичь этой цели с помощью HTML5 + CSS3 (желательно без использования JS, jQuery или некоторых основанных на сценариях патчей)?
Фактическая ситуация (ДЕМО):
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
) или нет. Цель вопроса - как взять под контроль текст, который будет показан.
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>