裁剪文本太长内div

<div style="display:inline-block;width:100px;"> very long text </div> 

任何方式来使用纯CSS剪切太长的文本,而不是显示在下一个新行,只显示最大100px

 <div class="crop">longlong longlong longlong longlong longlong longlong </div>​ 

这是我能想到的一种可能的方法

 .crop {width:100px;overflow:hidden;height:50px;line-height:50px;}​ 

这样,长文本将仍然包装,但由于overflow设置,将不可见,并通过设置line-height相同的height我们确保只有一行将被显示。

看到演示这里和漂亮的溢出属性描述与交互式的例子。

您可以使用:

 overflow:hidden; 

隐藏区域外的文字。

请注意,它可能会削减最后一个字母(所以最后一个字母的一部分仍然会显示)。 更好的方法是在最后显示省略号。 你可以通过使用text-overflow来做到这一点:

 overflow: hidden; white-space: nowrap; /* Don't forget this one */ text-overflow: ellipsis; 
 .crop { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; width:100px; }​ 

http://jsfiddle.net/hT3YA/

下面的代码将隐藏你固定宽度的文本,你决定。 但对于响应式devise来说却不太合适。

 .CropLongTexts { width: 170px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 

更新

我已经注意到在(移动)设备(多个)由于(固定宽度)的文本(混合)…所以我已经编辑了上面的代码成为隐藏响应如下:

 .CropLongTexts { max-width: 170px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 

(最大宽度)确保文本无论是(屏幕大小)响应隐藏,不会相互混淆。