如果设置了 -webkit-box display 属性，则第一个字母不起作用

Question

我想以红色显示第一个字母，但我注意到当我使用 display: -webkit-box 时 first-letter 属性可能不再有效。

预期行为： 将样式应用于首字母（仅在 CSS 中）并保留用于激活 -webkit-line-clamp 属性的 display 属性（或找到 CSS 替代显示现在只有前两行而不使用 line-clamp 和 display 属性，这将允许 first-letter 属性).

h2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;

    overflow: hidden;
    text-overflow: ellipsis;

    width: 75px;
    border: 1px solid lightgray;
}

h2::first-letter {
    color: red;
}

<h2>This is a pretty simple test</h2>

Answer 1

准确地说，::first-letter 仅适用于：

display: block;
display: inline-block;
display: flow-root;

所以如果你想要一个适合你的结果，你应该使用js Color JS based on this subject

演示：

(function() {
    // Let's get all user names, you might have another structure
    var users = document.querySelectorAll('h2');
    
    // Create the span containing the highlighted asterisk
    var asterisk = document.createElement('span');
    asterisk.className = 'highlight';
    
    // Walk the users (teehee) and check if the first characer is an asterisk
    for (var i = 0; i < users.length; ++i) {
      var user = users[i];
      var text = user.textContent;
      var firstLetter = text[0];
      asterisk.appendChild(document.createTextNode(firstLetter));
      user.removeChild(user.firstChild);
      user.appendChild(asterisk);
      user.appendChild(document.createTextNode(text.slice(1)));
    }
})();

h2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;

  overflow: hidden;
  text-overflow: ellipsis;

  width: 75px;
  border: 1px solid lightgray;
}

/*h2::first-letter {
  color: red;
}*/

.highlight {
  color: #f00;
}

<h2>This is a pretty simple test</h2>

如果设置了 -webkit-box display 属性，则第一个字母不起作用

First letter not working if -webkit-box display property is set

css

webkit

演示：