在 word-break: break-word 中，我想使用 CSS / JS 将下一行的第一个单词大写，这可能吗？

Question

我有一个要求，把换行的句子的第一个字大写（换行到下一行，因为断字）。我知道第一个字母，第一行选择器，但 none 适合这种情况。我卡住了，帮帮我！！！

进一步说明：例如一种观点是
Lorem ipsum 和
普罗米修斯

进一步缩小，应该是这样的：
洛伦
假数
并且
普罗米修斯

Answer 1

当前 CSS 不可能将每行的第一个单词大写。

最接近的方法是使用 text-transform 将每个单词大写即 text-transform: uppercase;

Answer 2

您可以转换文本，使每个单词都有自己的 span，然后在每次调整页面大小时检查每个 span 的 position。

这可能效果不佳，因此您可能希望 debounce 调整大小。

要使用 ::first-letter，元素必须是 block-level 元素，默认情况下 span 不是。所以一定是display:inline-block.

这不处理 'break-word'，因为 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>

在 word-break: break-word 中，我想使用 CSS / JS 将下一行的第一个单词大写，这可能吗？

In word-break: break-word, I want to capitalize the first word in the next line either using CSS / JS, Is this possible?

html

css

jquery

css-selectors

responsive-design