CSS(文本溢出 : ellipsis) -- a shorter way?

Question

文本省略号有更短的方法吗？只是一个提示，但它似乎最多只需要宽度和文本溢出吗？

width: (whatever);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

Answer 1

CSS 中的 text-overflow 属性处理文本溢出元素框时被剪裁的情况。它可以被剪裁(即切断、隐藏)、显示省略号 ('…', Unicode Range Value U+2026) 或显示作者定义的字符串(当前浏览器不支持作者定义的字符串)。

请注意，仅当容器的溢出属性的值为 hidden、scroll 或 auto 和 white- 时，才会发生 text-overflow空格:nowrap;.

.overflow {
  width: 10em;
  outline: 1px solid #000;
  margin: 0 0 2em 0;
  /**
   * Required properties to achieve text-overflow
   */
  white-space: nowrap;
  overflow: hidden;
}

body style {
  display: block;
  font: 14px monospace;
  padding: 3px;
  margin: 0 0 5px 0;
}

<style>
  .clip {
    text-overflow: clip;
  }
</style>
<p class="overflow clip">This is an example text showing nothing interesting but the truncated content via text-overflow shorthand property.</p>

<style>
  .ellipsis {
    text-overflow: ellipsis;
  }
</style>
<p class="overflow ellipsis">This is an example text showing nothing interesting but the truncated content via text-overflow shorthand property.</p>

<style>
  .word {
    text-overflow: ellipsis-word;
  }
</style>
<p class="overflow word">This is an example text showing nothing interesting but the truncated content via text-overflow shorthand property.</p>

<style>
  .text {
    text-overflow: "---";
  }
</style>
<p class="overflow text">This is an example text showing nothing interesting but the truncated content via text-overflow shorthand property.</p>

<style>
  .double {
    text-overflow: ellipsis ellipsis;
    text-align: center;
  }
</style>
<p class="overflow double">This is an example text showing nothing interesting but the truncated content via text-overflow shorthand property.</p>