文本换行到下一行

Question

我有一个带小标题的div - 只有两个字。

当我调整da浏览器大小时，文本换行，最后一个单词转到下一行。

我想在最后一个单词进入下一行时显示不同的样式。例如：font-weight：normal而不是粗体。

这只能用css吗？

Answer 1

您可以使用::first-line伪元素。

来自MDN：

  

::第一行CSS伪元素将样式应用于第一行   块级元素。注意第一行的长度   取决于许多因素，包括元素的宽度，宽度   文档的大小和文本的字体大小。

＆＃13;

＆＃13;

section {
  width: 10%;
  border: 2px solid tomato;
}
h2 {
  font-weight: normal;
}
h2:first-line {
  font-weight: bold;
  color: green;
}

＆＃13;

<section>
  <h2>Some heading</h2>
</section>

＆＃13;

＆＃13;

＆＃13;

Codepen demo（调整大小以查看效果）

Answer 2

由于您的内容更具动态性，您可能需要使用Javascript来完成此操作。页面调整大小的事件监听器会检查标题div的高度，并调整包含第二个单词的范围应该可以解决问题。

window.onresize = function(){
 document.getElementById('last_word').style.font-weight = 'normal';
};

如果您的页面内容相当静态，您可能会使用css媒体查询。我不知道有什么办法让css抓住div中的第二个单词，但是如果你把第二个单词放在一个跨度中你可以做这样的事情：

@media (max-width: 700px) {
 #header_id>span {
  font-weight: normal;
 }
}

当然，用你找到的任何宽度替换700px会触发内容自动换行。