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相同，我们确保只有一行显示。

使用交互式示例查看demo here和不错的overflow property说明。

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

（最大宽度）确保文本将被响应地隐藏（屏幕大小），并且不会相互混合。

Answer 6

   .cut_text {
      white-space: nowrap; 
      width: 200px; 
      border: 1px solid #000000;
      overflow: hidden;
      text-overflow: ellipsis;
    }

<div class="cut_text">

very long text
</div>

div里面的文字太长了

6 个答案: