裁剪文本太长内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; }

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

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

更新

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

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

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