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; 
}