【问题标题】：How to prevent text from overflowing in CSS?如何防止CSS中的文本溢出？
【发布时间】：2009-07-22 14:02:45
【问题描述】：

如何防止 div 块中的文本在 CSS 中溢出？

div {
  width: 150px;
  /* what to put here? */
}

&lt;div&gt;This div contains a VeryLongWordWhichDoesNotFitToTheBorder.&lt;/div&gt;

【问题讨论】：

为什么你的文字会溢出？
@ViratKadaru ...因为它是 360pt 格里高利圣咏衬线

标签： html css overflow

【解决方案1】：

简答

简单使用：

word-wrap: break-word;
white-space: pre-wrap;
word-break: break-word;

长答案

1。 `word-wrap`

允许长字能够换行到下一行。

可能的值：

normal: 只在允许的断点处断字
break-word: 允许破坏牢不可破的单词

div {
    width: 150px; 
    border: 2px solid #ff0000;
}

div.normal {
    word-wrap: normal;
}

div.break {
    word-wrap: break-word;
}

<h2>word-wrap: normal</h2>
<div class="normal"> This div contains a VeryLongWordWhichDoesNotFitToTheBorder.</div>

<h2>word-wrap: break-word</h2>
<div class="break"> This div contains a VeryLongWordWhichDoesNotFitToTheBorder.</div>

2。 `white-space`

指定如何处理元素内的空白。

可能的值：

nowrap：文本永远不会换到下一行。
pre-wrap：空白由浏览器保留。文本将在必要时换行，并在换行符处

div {
    width: 150px;
    border: 2px solid #ff0000;
}

div.nowrap {
    white-space: nowrap;
}

div.pre-wrap {
    white-space: pre-wrap;
}

<h2>white-space: nowrap</h2>
<div class="nowrap">This div contains a very long but normal paragraph with so many words and nothing else.</div>

<h2>white-space: pre-wrap</h2>
<div class="pre-wrap">This div contains a very long but normal paragraph with so many words and nothing else.</div>

3。 `word-break`

指定单词在到达行尾时应该如何中断。

可能的值：

normal：默认换行规则。
break-word: 为防止溢出，单词可能会在任意点被中断。

div {
  width: 150px; 
  border: 2px solid #ff0000;
}

div.normal {
  word-break: normal;
}

div.break-word {
  word-break: break-word;
}

<h2>word-break: normal (default)</h2>
<div class="normal"> This div contains a VeryLongWordWhichDoesNotFitToTheBorder.</div>

<h2>word-break: break-word</h2>
<div class="break-word"> This div contains a VeryLongWordWhichDoesNotFitToTheBorder.</div>

对于浏览器特定版本的white-space，使用：

white-space: pre-wrap;      /* CSS3 */
white-space: -moz-pre-wrap; /* Firefox */
white-space: -pre-wrap;     /* Opera <7 */
white-space: -o-pre-wrap;   /* Opera 7 */

【讨论】：

这个伟大的答案将近 8 年没有被接受。

【解决方案2】：

如果您希望 div 中溢出的文本自动换行而不是隐藏或制作滚动条，请使用

word-wrap: break-word

财产。

【讨论】：

https://developer.mozilla.org/en-US/docs/Web/CSS/word-wrap
用户需要勾选这个作为答案。今天对我有用！谢谢朋友！
哦，我的天哪，非常感谢你，我真的疯了，因为我可以通过你的回答解决一些问题！ XD
现在是分词：break-all

【解决方案3】：

你可以试试：

<div id="myDiv">
    stuff 
</div>

#myDiv {
    overflow:hidden;
}

查看the docs for the overflow property了解更多信息。

【讨论】：

那些不是“文档”，这是一个包含一些关于 HTML/CSS 的基本信息的网站。文档位于 w3.org

【解决方案4】：

您可以使用 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
}

参考： http://makandracards.com/makandra/5883-use-css-text-overflow-to-truncate-long-texts

【讨论】：

【解决方案5】：

我想你应该从 w3 的基础开始

https://www.w3schools.com/cssref/css3_pr_text-overflow.asp

div {
    white-space: nowrap; 
    overflow: hidden;
    text-overflow: ellipsis;
}

【讨论】：

参见 this link 以获取来自 MDN 的示例

【解决方案6】：

.NonOverflow {
    width: 200px; /* Need the width for this to work */
    overflow: hidden;
}

<div class="NonOverflow">
    Long Text
</div>

【讨论】：

在多语种以外的文本中，会导致部分长词的字符被隐藏。

【解决方案7】：

现在是 css 属性：

word-break: break-all

【讨论】：

【解决方案8】：

你可以用 CSS 来控制它，有几个选项：

hidden -> 所有溢出的文本都将被隐藏。
visible -> 让溢出的文字可见。
scroll -> 文本溢出时放置滚动条

希望对你有帮助。

【讨论】：

【解决方案9】：

还有另一个 css 属性：

white-space : normal;

white-space 属性控制文本在其应用到的元素上的处理方式。

div {

  /* This is the default, you don't need to
     explicitly declare it unless overriding
     another declaration */
  white-space: normal; 

}

【讨论】：

这对结合溢出非常有用：隐藏；

【解决方案10】：

尝试添加此类以解决问题：

.ellipsis {
  text-overflow: ellipsis;

  /* Required for text-overflow to do anything */
  white-space: nowrap;
  overflow: hidden;
}

在此链接中进一步解释http://css-tricks.com/almanac/properties/t/text-overflow/

【讨论】：

【解决方案11】：

如果您的 div 在 css 中设置了高度，这将导致它溢出到 div 之外。

如果您需要始终保持 div 的最小高度，您可以给 div 一个最小高度。

Min-height 在 IE6 中不起作用，如果你有一个 IE6 特定的样式表，你可以给它一个 IE6 的常规高度。 IE6中的高度根据里面的内容而变化。

【讨论】：

【解决方案12】：

关于如何发现导致问题的 CSS 部分的建议：

1) 在所有<div> 元素上设置style="height:auto;"，然后重试。

2) 在所有<div> 元素上设置style="border: 3px solid red;"，以查看您的<div> 的框占用了多宽的区域。

3) 从您的 CSS 中删除所有 css height:#px; 属性并重新开始。

例如：

<div id="I" style="height:auto;border: 3px solid red;">I
    <div id="A" style="height:auto;border: 3px solid purple;">A
        <div id="1A" style="height:auto;border: 3px solid green;">1A
        </div>
        <div id="2A" style="height:auto;border: 3px solid green;">2A
        </div>
    </div>
    <div id="B" style="height:auto;border: 3px solid purple;">B
        <div id="1B" style="height:auto;border: 3px solid green;">1B
        </div>
        <div id="2B" style="height:auto;border: 3px solid green;">2B
        </div>
    </div>
</div>

【讨论】：

【解决方案13】：

overflow: scroll ?或自动。在样式属性中。

【讨论】：

【解决方案14】：

你可以在css中设置最小宽度，例如：

.someClass{min-width: 980px;}

它不会中断，但你仍然需要处理滚动条。

【讨论】：

【解决方案15】：

！！ 硬编码提前权衡！！根据周围的代码和屏幕分辨率，这可能会导致不同/不需要的行为

如果隐藏溢出是不可能的并且需要正确的断字，您可以在您希望单词/文本中断的地方使用软连字符 HTML 实体。通过这种方式，您可以手动预先确定断点。

&shy;

只有当单词需要中断而不溢出其周围的容器时才会出现连字符。

例子：

<div class="container">
  foo&shy;bar
</div>

如果容器足够宽并且文本不会溢出容器的结果：

foobar

如果容器太小并且文本实际上会溢出容器的结果：

foo-
bar

.container{
  background-color: green;
  max-width: 30px;
}

Example 1 - container to small => text overflows container:

<div class="container">
  foobar
</div>

Example 2 - using soft hyphen => text breaks at predetermined break point:

<div class="container">
  foo&shy;bar
</div>

Example 3 - using soft hyphen => text still overflowing because the text before the soft hyphen is to long:

<div class="container">
  foobar&shy;foo
</div>

【讨论】：

简答

长答案

1。 word-wrap

2。 white-space

3。 word-break

1。 `word-wrap`

2。 `white-space`

3。 `word-break`