Html 在 wordbreak： breakword 中，我想使用 CSS JS 将下一行中的第一个单词大写

发布于03月17日

我有一个要求，那就是把包装好的句子的第一个单词大写(由于分词，所以包装到下一行).我知道第一个字母，第一行 Select 器，但没有一个适合这种情况.我卡住了，帮帮我！！！

Further Explaination: e.g. in one view it would be
Lorem ipsum and
Prometheus

further scaling down, it should be like this:
Lorem
Ipsum
And
Prometheus

推荐答案

您可以转换文本，使每个单词都有自己的span个，然后每次调整页面大小时，判断每个span个单词中的position个.

这可能不会很好地执行，因此您可能希望调整debounce的大小.

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

这不适用于"break word"，因为OPs示例没有将其作为示例，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>