Html css 溢出 - 只有 1 行文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7546389/
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
css overflow - only 1 line of text
提问by homerun
I have divwith the following css style:
我有div以下 css 样式：
width:335px; float:left; overflow:hidden; padding-left:5px;
When I insert, into that div, a long line of text, it's breaking to a new line and displays all the text. What I want is to have only one line of text that will not line-break. When the text is long, I want this overflowing text to disappear.
当我在其中插入div一长行文本时，它会换行并显示所有文本。我想要的是只有一行不会换行的文本。当文本很长时，我希望这个溢出的文本消失。
I was thinking about setting the height but it seems to be wrong.
我正在考虑设置高度，但似乎是错误的。
Maybe if I add height that is the same as the font, it should work and not cause any problems in different browsers?
也许如果我添加与字体相同的高度，它应该可以工作并且不会在不同的浏览器中引起任何问题？
How can I do that?
我怎样才能做到这一点？
回答by Septnuits
If you want to restrict it to one line, use white-space: nowrap;on the div.
如果要将其限制为一行，请white-space: nowrap;在 div 上使用。
回答by Mouli
If you want to indicate that there's still more content available in that div, you may probably want to show the "ellipsis":
如果您想表明该 div 中还有更多可用内容，您可能需要显示“省略号”：
text-overflow: ellipsis;
This should be in addition to white-space: nowrap;suggested by Septnuits.
这应该是white-space: nowrap;Septnuits 建议的补充。
Also, make sure you checkout this threadto handle this in Firefox.
另外，请确保您签出此线程以在 Firefox 中处理此问题。
回答by Gaurav Tripathi
You can use this css code:
您可以使用此 css 代码：
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
The text-overflowproperty in CSS deals with situations where text is clipped when it overflows the element's box. It can be clipped(i.e. cut off, hidden), display an ellipsis('…', Unicode Range Value U+2026).
CSS 中的text-overflow属性处理文本溢出元素框时被剪裁的情况。它可以被剪裁（即截断、隐藏）、显示省略号（'...'，Unicode Range Value U+2026）。
Note that text-overflowonly occurs when the container's overflow property has the value hidden, scrollor autoand white-space: nowrap;.
请注意，文本溢出仅在容器的溢出属性值为hidden、scroll或auto和white-space: nowrap; 时发生。.
Text overflow can only happen on blockor inline-blocklevel elements, because the element needs to have a width in order to be overflow-ed. The overflow happens in the direction as determined by the direction property or related attributes.
文本溢出只能发生在块级或内联块级元素上，因为元素需要有一个宽度才能被溢出。溢出发生在方向属性或相关属性确定的方向上。
回答by Omid Ahmadyani
the best code for UX and UI is
UX 和 UI 的最佳代码是
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
display: inherit;
回答by shafii muhudi
if addition please, if you have a long text please you can use this css code bellow;
如果添加请，如果您有很长的文本，请使用下面的 css 代码；
text-overflow: ellipsis;
overflow: visible;
white-space: nowrap;
make the whole line text visible.
使整行文本可见。
回答by Jaydeep Kataria
width:200px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
Define width also to set overflow in one line
定义宽度也可以在一行中设置溢出
回答by Dekcolnu
I had the same issue and I solved it by using:
我有同样的问题，我通过使用解决了它：
display: inline-block;
on the divin question.
对div有问题。
