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

Question

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

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

Answer 1

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

注意仅当容器的溢出属性具有值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>

Answer 2

所有这一切都必要文本省略号是以下三个规则：

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

这些规则文本的省略号将工作如果包含的元素收缩由于它的父元素宽度小于文本内容。 white-space: nowrap;是不可或缺的，因为正常行为是将空白上的文本分解为其父项。通过nowrap防止这种行为将强制文本保留在一行上，可能会使其父文件溢出。

你可以增加宽度到包含元素更精确，但如上所述，这是没有必要的。

缩短与一个CSS预处理器

的规则可以简化为一个混合，这将使设置这些规则简单。例如。在LESS：

// declare mixin 
.text-ellipsis() { 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
} 

// use it 
div { 
    width: 50px; 
    .text-ellipsis; 
}