div里面的文字太长了

Question

<div style="display:inline-block;width:100px;">

very long text
</div>

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

Answer 1

您可以使用:

overflow:hidden;

隐藏区域外的文本.

请注意,它可能会删除最后一个字母(因此仍会显示最后一个字母的一部分).一种更好的方法是在结尾处显示省略号.你可以使用text-overflow:

overflow: hidden;
white-space: nowrap; /* Don't forget this one */
text-overflow: ellipsis;

Answer 2

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

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

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

这样,长文本仍将换行,但由于overflow设置不可见,并且设置line-height相同,因为height我们确保只显示一行.

请参阅此处的演示和带有交互式示例的漂亮溢出属性描

Answer 3

.crop { 
  overflow:hidden; 
  white-space:nowrap; 
  text-overflow:ellipsis; 
  width:100px; 
}?

http://jsfiddle.net/hT3YA/

Answer 4

为什么不使用相对单位？

.cropText {
    max-width: 20em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

Answer 5

下面的代码将以您决定的固定宽度隐藏您的文本。但不太适合响应式设计。

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

更新

我注意到在（移动）设备中，由于（固定宽度），文本（混合）彼此...所以我编辑了上面的代码以响应式隐藏，如下所示：

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

（最大宽度）确保无论（屏幕尺寸）如何，文本都会响应地隐藏，并且不会相互混合。