有什么办法可以让 white-space: nowrap 只显示单点 (.)

Question

我希望white-space: nowrap 在文本较长时仅显示单个点

例如文本是This is a very long text，我想显示This is.而不是This is...

当前片段如下所示

   <div>
       <div>This is a long text</div>
       <svg></svg>
   </div>

Answer 1

text-overflow CSS property 允许您提供一个字符串，用于在溢出时向用户发出附加内容的信号。我认为这将实现您正在寻找的东西。

text-overflow: "."

重要的是，这个功能只在firefox 9+上可用。

Answer 2

一种选择是在包含的 div 上使用 display: flex 和 ::after：

span {
  margin: 0;
  max-width: 45px;
  overflow: hidden;
  white-space: nowrap;
}

.container {
  display: flex;
}

.container::after {
  content: '.';
}

<div>
  <div class="container">
    <span>This is a long text</span>
  </div>
  <svg></svg>
</div>

不理想，但它有效。