3

无论内容如何，​​我只需要在第一行留下一个词，因此无法进行额外的标记。

我尝试使用伪元素来做到这word-spacing一点::first-line。这在 Firefox 或 IE 中运行良好，但在 WebKit 浏览器中失败（在最新版本的 Chrome、Opera 和 Safari 中测试）。

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

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

如果在 Firefox 或 IE 中打开，但在 WebKit 浏览器中打开，下面的示例完全符合我的要求。

.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;
}
<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>

4

1 回答 1

1

所以,我认为那会做

(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/>');
})();
.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;
}
<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>

于 2017-08-22T10:59:15.420 回答