Question

文本省略号是否有更短的方法？只是一个抱怨，但它似乎不应该只需要最多，宽度和文本溢出？

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

Answer 1

文本省略号的所有必要是以下三个规则：

overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

根据这些规则，如果由于父元素的宽度小于文本内容而导致包含元素缩小，则text-ellipsis将起作用。 white-space: nowrap;是不可或缺的，因为正常行为是在空格上打破文本以将其包含在其父级中。使用nowrap阻止此行为将强制文本保留在一行中，可能会溢出其父级。

你可以为包含元素添加宽度更精确，但如上所述，它不是必需的。

使用CSS预处理器缩短

规则可以简化为mixin，这将使这些规则设置简单。例如。在LESS中：

// declare mixin .text-ellipsis() { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } // use it div { width: 50px; .text-ellipsis; }

Answer 2

CSS中的文本溢出属性处理文本在溢出元素框时被剪裁的情况。它可以被剪裁（即剪切，隐藏），显示省略号('…', Unicode Range Value U+2026) or display an author-defined string (no current browser support for author-defined strings).

请注意，仅当容器的overflow属性值为hidden，scroll或auto和white-space: 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>

CSS（文本溢出：省略号） - 更短的方式？

2 个答案: