Question

如果我有一个指定宽度的div，当内容超出父div的宽度时，如何阻止换行？这是我的HTML代码：

<div style="width: 200"><p>Verrrrrrry loooooooong pppppppp ellllemmmmmmmmentttt</p></div>

任何帮助将不胜感激。谢谢！

Answer 1

你可以简单地使用：

div {
    white-space: nowrap;
    overflow: hidden; /* assuming you don't want the <div> to stretch to accommodate */
}                     /* the width of the text */

div {
  width: 300px;
  white-space: nowrap;
  overflow: hidden;
  border: 2px solid rgba(0,0,0,0.5);
}

<div>This element has some text longer, by far, than the width of the page in which it is contained; it would be lorem ipsum but, honestly, I'd rather spend a few moments typing randomly, but continuously, than go find myself some of that lorem-goodness...</div>

参考文献：

Answer 2

使用white-space: nowrap：

div{
    overflow: hidden; /* Prevent text from overflowing div */
    white-space: nowrap; /* Prevent text from using more than one line */
}

Answer 3

试试这个CSS：

overflow:hidden;
white-space:nowrap;

应该做的伎俩

防止div中的换行符

3 个答案: