Question

我无法让text-overflow: ellipsis使用包含<ruby/>标记的<rt/>代码。下面的示例显示省略号有效，但当有<rt/>元素时，它会停止工作。有没有办法让它发挥作用？

＆＃13;

body {
  width: 100px;
}

ruby,
.item,
.container {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.t3 ruby,
.t4 ruby {
  display: inline-block;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
</head>

<body>
  <div class="container t1">
    <div class="item">
      <ruby>This is some base text.<rt>This is ruby text.</rt></ruby>
    </div>
  </div>

  <div class="container t2">
    <div class="item">
      This is some text.
    </div>
  </div>

  <div class="container t3">
    <div class="item">
      <ruby>This is text in a ruby tag.</ruby>
    </div>
  </div>


  <div class="container t4">
    <div class="item">
      <ruby>This is some other base text.<rt>This is other ruby text.</rt></ruby>
    </div>
  </div>

</body>

</html>

＆＃13;

Answer 1

使用传统的CSS代码片段，对ruby的椭圆化文本工作得很好。但是，包括Chrome在内的多种浏览器都存在问题。如果您想使用有效的浏览器，请使用IE11或Firefox。

请参阅https://bugs.chromium.org/p/chromium/issues/detail?id=817561

带有文本溢出的<ruby>：省略号

1 个答案: