在div中裁剪文本太长

85

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

very long text
</div>

任何使用纯css的方法都可以剪切太长的文本，而不是在下一行显示，并且最多显示100px

html css

— Cometta
source

56

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

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

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

这样，长文本仍会环绕，但由于overflow设置而不会显示，并且通过设置line-height相同（height我们确保只显示一行）来设置。

请参见此处的演示以及带有交互式示例的漂亮的溢出属性描述。

— 达沃·卢西奇（Davor Lucic）
source

1

我不会指望“行高”来防止换行，因为用户有可能在浏览器中更改了字体设置（对于较小的文本）。同样，对于大字体，如果将div的高度固定为像素数，这看起来会很糟糕。尤其是在移动浏览器和“视网膜”屏幕上，如果设计布局允许的话，我会尽量保持div的高度灵活！

— PJ Brunet

154

您可以使用：

overflow:hidden;

隐藏区域外的文本。

请注意，它可能会剪切最后一个字母（因此，最后一个字母的一部分仍会显示）。更好的方法是在末尾显示省略号。您可以使用text-overflow：

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

— 阿森尼·莫尔琴科
source

空格：nowrap并不是真正必要的，因为我有多行显示了很长的文件路径。如果没有空格，则长而坚不可摧的路径将得到省略号，然后下一行将显示路径的其余部分。最重要的是，我可以复制文本（包括省略号），然后粘贴整个路径。真好！

— 罗伯特·科赫

如果您想知道（像我一样），省略号在旧版本的Firefox中将不起作用。“自Firefox版本7文本溢出以来，支持省略号。” stackoverflow.com/questions/5990414/...

— PJ深色

如果您希望在悬停时显示工具提示以显示全文或类似内容该怎么办？

— pedrorijo91

2

@ pedrorijo91您可以简单地title="full text goes here"在html中使用。

— 杰里（Jerry）

27

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

http://jsfiddle.net/hT3YA/

— s1ntez
source

9

为什么不使用相对单位？

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

— 托马斯·麦克（Tomas Macek）
source

4

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

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

更新资料

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

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

（最大宽度）确保无论（屏幕大小）如何，文本都将有效地隐藏，并且不会彼此混合。

— Mizo游戏
source

3

尽管此代码可以回答问题，但提供有关此代码为何和/或如何回答问题的其他上下文，可以提高其长期价值。

— 唐老鸭

0

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

<div class="cut_text">

very long text
</div>

展开摘要

— 苏普里亚
source