Html 我可以防止 div 块中的文本溢出吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1165497/
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
Can I prevent text in a div block from overflowing?
提问by Amalgovinus
Can I prevent text in a div block from overflowing?
我可以防止 div 块中的文本溢出吗？
回答by Amalgovinus
If you want the overflowing text in the div to automatically newline instead of being hidden or making a scrollbar, use the
如果您希望 div 中的溢出文本自动换行而不是被隐藏或制作滚动条，请使用
word-wrap: break-word
word-wrap: break-word
property.
财产。
回答by inkedmn
You can try:
你可以试试：
<div id="myDiv">
stuff
</div>
#myDiv {
overflow:hidden;
}
Check out the docs for the overflow propertyfor more information.
查看溢出属性的文档以获取更多信息。
回答by Mara Jimenez
You can use the CSS property text-overflow to truncate long texts.
您可以使用 CSS 属性 text-overflow 来截断长文本。
<div id="greetings">
Hello universe!
</div>
#greetings
{
width: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; // This is where the magic happens
}
reference: http://makandracards.com/makandra/5883-use-css-text-overflow-to-truncate-long-texts
参考：http: //makandracards.com/makandra/5883-use-css-text-overflow-to-truncate-long-texts
回答by Timothée Martin
You can control it with CSS, there is a few options :
你可以用 CSS 控制它，有几个选项：
- hidden -> All text overflowing will be hidden.
- visible -> Let the text overflowing visible.
- scroll -> put scroll bars if the text overflows
- hidden -> 所有溢出的文本都将被隐藏。
- 可见 -> 让溢出的文本可见。
- 滚动 -> 如果文本溢出，则放置滚动条
Hope it helps.
希望能帮助到你。
回答by Pmpr
Simply use this:
只需使用这个：
white-space: pre-wrap; /* CSS3 */
white-space: -moz-pre-wrap; /* Firefox */
white-space: -pre-wrap; /* Opera <7 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* IE */
回答by Sachin
there is another css property :
还有另一个 css 属性：
white-space : normal;
The white-space property controls how text is handled on the element it is applied to.
white-space 属性控制如何在应用文本的元素上处理文本。
div {
/* This is the default, you don't need to
explicitly declare it unless overriding
another declaration */
white-space: normal;
}
回答by edward
Try adding this class in order to fix the issue:
尝试添加此类以解决问题：
.ellipsis {
text-overflow: ellipsis;
/* Required for text-overflow to do anything */
white-space: nowrap;
overflow: hidden;
}
Explained further in this link http://css-tricks.com/almanac/properties/t/text-overflow/
在此链接中进一步解释http://css-tricks.com/almanac/properties/t/text-overflow/
回答by bean
overflow: scroll? Or auto.
in the style attribute.
overflow: scroll? 或自动。在样式属性中。
回答by Ronit Oommen
I guess you should start with the basics from w3
我想你应该从 w3 的基础开始
https://www.w3schools.com/cssref/css3_pr_text-overflow.asp
https://www.w3schools.com/cssref/css3_pr_text-overflow.asp
div {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
回答by Damir Olejar
You can just set the min-width in the css, for example:
您可以在 css 中设置最小宽度，例如：
.someClass{min-width: 980px;}
It will not break, nevertheless you will still have the scroll-bar to deal with.
它不会中断，但是您仍然需要处理滚动条。
