Question

无论内容是什么，我都只需要在第一行留下一个单词，因此不需要额外的标记。

我尝试使用带有word-spacing伪元素的::first-line来执行此操作。这在Firefox或IE中工作正常，但在WebKit浏览器中失败（在最新版本的Chrome，Opera和Safari中测试过）。

另外，为整个元素设置字间距也可以。

我是否遗漏了某些东西，或者它只是在WebKit中不起作用？

如果在Firefox或IE中打开，下面的示例正是我想要的，但在WebKit浏览器中却没有。

＆＃13;

.outer {
  width: 100px;
  border: 1px solid black;
  height: auto;
  margin: 0 0 20px;
}

.inner {
  display: inline-block;
}

.with-first-line::first-line {
  word-spacing: 200px;
}

.whole {
  word-spacing: 200px;
}

＆＃13;

<div class="outer">
  <span class="inner with-first-line">long line with words</span>
</div>

<div class="outer">
  <span class="inner whole">long line with words</span>
</div>

＆＃13;

Answer 1

所以，我认为那样做

＆＃13;

(function () { 
    var node = $(".with-first-line").contents().filter(function () { return this.nodeType == 3 }).first(),
        text = node.text(),
        first = text.slice(0, text.indexOf(" "));
    
    if (!node.length)
        return;
    
    node[0].nodeValue = text.slice(first.length);
    node.before('<span class="first">' + first + '</span><br/>');
})();

＆＃13;

.first { color: red; font-weight: bold; }

.outer {
  width: 100px;
  border: 1px solid black;
  height: auto;
  margin: 0 0 20px;
}

.inner {
  display: inline-block;
}

.with-first-line::first-line {
  word-spacing: 200px;
}

.whole {
  word-spacing: 200px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer">
  <span class="inner with-first-line">long line with words</span>
</div>

<div class="outer">
  <span class="inner whole">long line with words</span>
</div>

＆＃13;

CSS：对任何内容的第一个单词后换行

1 个答案: