Html 在 div 中裁剪文本太长
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3695435/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
crop text too long inside div
提问by cometta
<div style="display:inline-block;width:100px;">
very long text
</div>
any way to use pure css to cut the text that is too long rather than show on next new line and only show max 100px
任何使用纯 css 剪切太长的文本而不是显示在下一个新行并且只显示最大 100px 的任何方式
采纳答案by Davor Lucic
<div class="crop">longlong longlong longlong longlong longlong longlong </div>?
This is one possible approach i can think of
这是我能想到的一种可能的方法
.crop {width:100px;overflow:hidden;height:50px;line-height:50px;}?
This way the long text will still wrap but will not be visible due to overflowset, and by setting line-heightsame as heightwe are making sure only one line will ever be displayed.
这样，长文本仍将换行，但由于overflow设置而将不可见，并且通过设置line-height与height我们相同的方式确保只显示一行。
See demo hereand nice overflow propertydescription with interactive examples.
回答by Arseni Mourzenko
You can use:
您可以使用：
overflow:hidden;
to hide the text outside the zone.
隐藏区域外的文本。
Note that it may cut the last letter (so a part of the last letter will still be displayed). A nicer way is to display an ellipsis at the end. You can do it by using text-overflow:
请注意，它可能会剪切最后一个字母（因此仍会显示最后一个字母的一部分）。更好的方法是在末尾显示省略号。您可以通过使用text-overflow：
overflow: hidden;
white-space: nowrap; /* Don't forget this one */
text-overflow: ellipsis;
回答by s1ntez
.crop {
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
width:100px;
}?
回答by Tomas Macek
Why not use relative units?
为什么不使用相对单位？
.cropText {
max-width: 20em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
回答by Mizo Games
Below code will hide your text with fixed width you decide. but not quite right for responsive designs.
下面的代码将隐藏您决定的固定宽度的文本。但不太适合响应式设计。
.CropLongTexts {
width: 170px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Update
更新
I have noticed in (mobile) device(s) that the text (mixed) with each other due to (fixed width)... so i have edited the code above to become hidden responsively as follow:
我注意到在（移动）设备中，由于（固定宽度）文本（混合）彼此……所以我编辑了上面的代码以响应如下隐藏：
.CropLongTexts {
max-width: 170px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
The (max-width) ensure the text will be hidden responsively whatever the (screen size) and will not mixed with each other.
(max-width) 确保无论（屏幕大小）如何，文本都将被响应地隐藏并且不会相互混合。
回答by Supriya
.cut_text {
white-space: nowrap;
width: 200px;
border: 1px solid #000000;
overflow: hidden;
text-overflow: ellipsis;
}<div class="cut_text">
very long text
</div>