你可以试试:

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


#myDiv {
overflow:hidden;
}

查看 溢出属性的文档了解更多信息。

- overflow: scroll?-或者自动档。 在 style 属性中。

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

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

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

• 所有溢出的文本将被隐藏。
• 让文本溢出可见。
• 如果文本溢出，则放置滚动条

希望能有帮助。

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

如果需要始终保持 div 上的最小高度，那么可以给 div 设置最小高度。

最小高度不会在 IE6中工作，但是，如果你有一个 IE6特定的样式表，你可以给它一个正常的高度为 IE6。根据 IE6中的内容更改高度。

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

word-wrap: break-word

财产。

还有另一个 css 属性:

white-space : normal;

空白属性控制如何在应用它的元素上处理文本。

div {


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


}

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

简短的回答

简单使用:

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

长答案

1. word-wrap

允许长单词能够断开并换行到下一行。

可能的价值:

• 仅在允许的断点处断言
• 允许打破牢不可破的单词

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

试着添加这个类来解决这个问题:

.ellipsis {
text-overflow: ellipsis;


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

在此链接中进一步解释

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

.someClass{min-width: 980px;}

它不会破裂，但你仍然会有滚动条处理。

关于如何捕捉导致问题的 CSS 部分的建议:

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

2)在所有的 <div>元素上设置 style="border: 3px solid red;"，看看你的 <div>盒子占据的区域有多宽。

3)从你的 CSS 中删除所有的 cssheight:#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>

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

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

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

!！硬编码前进! ！取决于周围的代码和屏幕分辨率，这可能导致不同的/不想要的行为

­

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