В word-break: break-word я хочу использовать первое слово в следующей строке с заглавной буквы с помощью CSS/JS. Возможно ли это?
У меня есть требование использовать заглавную букву в первом слове обернутого предложения (перенести на следующую строку из-за разрыва слова). Я знаю о селекторах первой буквы, первой строки, но ни один из них не подходит для этого случая. Я застрял, помогите мне!!!
Дальнейшее объяснение:
например в одном представлении было бы
Лорем ипсум и
Прометей
при дальнейшем уменьшении должно быть так:
Лорем
Ипсум
И
Прометей
Я уверен, что у вас есть свои причины, но TBH, это был бы ужасный UX (IMO).
Вы не можете выбрать первую букву каждого разрыва
Вам понадобится немного JS, чтобы постепенно помещать текст в элемент по одному каналу за раз и замечать, когда его высота увеличивается. Это должно быть сделано всякий раз, когда вносятся изменения, например, изменение размера области просмотра.
Я вижу здесь только решение JavaScript. Ваши текущие примеры не соответствуют необходимостьword-break: break-word, поэтому, если каждое отдельное (нет прерывание) слово было заключено в отдельный диапазон, вы можете перебрать их и проверить их offsetLeft - если в настоящее время это 0, тогда этот элемент потребуется чтобы добавить класс, сделать первую букву прописной. Конечно, вам нужно будет повторно запустить это, когда произойдут какие-либо соответствующие изменения ширины контейнера или когда изменится сам контент. [...]
[...] Добавление word-break: break-word в микс делает его еще более сложным, потому что тогда вам придется завернуть каждый отдельный символ в отдельный элемент, потому что разрывы могут происходить в произвольной позиции Любые.
Ответы 2
С текущим CSS невозможно использовать первое слово каждой строки с заглавной буквы.
Самое близкое, что вы можете получить, - это использовать преобразование текста для заглавных букв каждого слова.
то есть text-transform: uppercase;
Вы можете преобразовать текст, чтобы каждое слово было в своем собственном span, а затем проверять position каждого span каждый раз при изменении размера страницы.
Это может работать не очень хорошо, поэтому вы, вероятно, захотите debounce изменить размер.
Чтобы использовать ::first-letter, элемент должен быть элементом блочного уровня, а span по умолчанию таковым не является. Так и должно быть display:inline-block.
Это не обрабатывает «разрывное слово», поскольку образцы OP не включают его в качестве примера, а break-word устарел.
// wrap each word in a span
$("p").each(function() {
$(this).html($(this).text().split(" ").map(t => "<span>" + t + "</span>").join(" "));
});
// determine what is "left" (it's not 0)
var farLeft = $("p").position().left;
// add a class to each "left" element and let css handle the rest
function firstLetter() {
$(".farleft").removeClass("farleft");
$("p>span").each(function() {
if ($(this).position().left == farLeft) {
$(this).addClass("farleft");
}
})
}
$(window).on("resize", firstLetter);
firstLetter();p>span { display:inline-block; }
.farleft::first-letter {
text-transform: uppercase;
font-weight:bold;
}
/* these are just for the demo so it's easier to see what's going on */
p { width: 50% }
.farleft { background-color: pink; }<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation 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</p>
Я не думаю, что есть способ добиться этого с текущим CSS.