html - 如何防止CSS中的文本溢出？

Question

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

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

<div>This div contains a VeryLongWordWhichDoesNotFitToTheBorder.</div>

score 190 · Accepted Answer

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

word-wrap: break-word

财产。

score 82 · Accepted Answer

你可以试试：

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

#myDiv {
    overflow:hidden;
}

查看溢出属性的文档以获取更多信息。

score 56 · Accepted Answer

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

score 46 · Accepted Answer

简答

只需使用：

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 */

score 20 · Accepted Answer

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

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

希望能帮助到你。

score 13 · Accepted Answer

还有另一个 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; 

}

score 6 · Accepted Answer

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

.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/

score 5 · Accepted Answer

5

现在是 css 属性：

word-break: break-all

于 2020-10-16T11:25:57.647 回答

score 4 · Accepted Answer

4

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

于 2009-07-22T14:04:34.600 回答

score 4 · Accepted Answer

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

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

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

score 1 · Accepted Answer

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

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

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

score 1 · Accepted Answer

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

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

score 1 · Accepted Answer

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

.someClass{min-width: 980px;}

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

score 1 · Accepted Answer

有关如何捕获导致问题的 CSS 部分的建议：

1）设置style="height:auto;"所有<div>元素并重试。

2）设置style="border: 3px solid red;"所有<div>元素以查看您<div>的盒子占用的区域宽度。

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

例如：

<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>

score 0 · Accepted Answer

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

如果隐藏溢出是不可能的并且需要正确的连字符，您可以使用软连字符 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>

更多信息：https ://en.wikipedia.org/wiki/Soft_hyphen

html - 如何防止CSS中的文本溢出？

15 回答 15

简答

长答案

1.word-wrap

2.white-space

3.word-break

Related

Reference

1.`word-wrap`

2.`white-space`

3.`word-break`