blocks|key|338785|text|如果希望div中的溢出文本自动换行，而不是隐藏或生成滚动条，请使用|type|unstyled|depth|inlineStyleRanges|entityRanges|data|338786|word-wrap:+break-word|offset|length|style|CODE|338787|属性。|338788|entityMap^0|0|0|L|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@$D|N|E|O|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|P|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|K|$]]

<p>If you want the overflowing text in the div to automatically newline instead of being hidden or making a scrollbar, use the </p>

<p><code>word-wrap: break-word</code> </p>

<p>property.</p>


blocks|key|3100453|text|您可以尝试：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3100454|<div+id="myDiv">
++++stuff+
</div>

#myDiv+{
++++overflow:hidden;
}|code-block|syntax|javascript|3100455|有关更多信息，请查看the+docs+for+the+overflow+property。|offset|length|3100456|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3schools.com/cssref/pr_pos_overflow.asp^0|0|0|A|Y|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<p>You can try:</p>

<pre><code>&lt;div id="myDiv"&gt;
    stuff 
&lt;/div&gt;

#myDiv {
    overflow:hidden;
}
</code></pre>

<p>Check out <a href="http://www.w3schools.com/cssref/pr_pos_overflow.asp" rel="noreferrer">the docs for the overflow property</a> for more information.</p>


blocks|key|336470|text|您可以使用CSS属性text-overflow截断长文本。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|336471|<div+id="greetings">
++Hello+universe!
</div>

#greetings
{
++width:+100px;
++white-space:+nowrap;
++overflow:+hidden;
++text-overflow:+ellipsis;+//+This+is+where+the+magic+happens
}|code-block|syntax|javascript|336472|参考：http://makandracards.com/makandra/5883-use-css-text-overflow-to-truncate-long-texts|offset|length|336473|entityMap|0|LINK|mutability|MUTABLE|url|http://makandracards.com/makandra/5883-use-css-text-overflow-to-truncate-long-texts^0|0|0|3|2B|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<p>You can use the CSS property text-overflow to truncate long texts.</p>

<pre><code>&lt;div id="greetings"&gt;
  Hello universe!
&lt;/div&gt;

#greetings
{
  width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; // This is where the magic happens
}
</code></pre>

<p>reference:
<a href="http://makandracards.com/makandra/5883-use-css-text-overflow-to-truncate-long-texts" rel="noreferrer">http://makandracards.com/makandra/5883-use-css-text-overflow-to-truncate-long-texts</a></p>


blocks|key|335400|text|简短的回答|type|unstyled|depth|inlineStyleRanges|entityRanges|data|335401|只需使用：|335402|word-wrap:+break-word;
white-space:+pre-wrap
word-break:+break-word;|code-block|syntax|javascript|335403|长长的答案|335404|1.+word-wrap|offset|length|style|CODE|335405|允许较长的单词能够换行并换行到下一行。|335406|可能值：|BOLD|335407|335408|normal：Break+words+only+at+allowed+break+points|unordered-list-item|335409|break-word：Allows+words+to+be+break|335410|(仅在允许的中断时允许中断不可中断的单词)|335411|​|335412|div+{
++++width:+150px;+
++++border:+2px+solid+#ff0000;
}

div.normal+{
++++word-wrap:+normal;
}

div.break+{
++++word-wrap:+break-word;
}|335413|<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>|335414|335415|2.+white-space|335416|指定如何处理元素中的空格。|335417|335418|335419|nowrap：文本永远不会换行到浏览器保留的下一个line.|335420|pre-wrap：空格。文本将在必要时换行，并在|335421|上换行|335422|335423|div+{
++++width:+150px;
++++border:+2px+solid+#ff0000;
}

div.nowrap+{
++++white-space:+nowrap;
}

div.pre-wrap+{
++++white-space:+pre-wrap;
}|335424|<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>|335425|335426|3.+word-break|335427|指定到达行尾时单词应如何换行。|335428|335429|335430|normal：默认换行符rules.|335431|break-word：为防止溢出，word可能会在任意位置换行。|335432|335433|335434|div+{
++width:+150px;+
++border:+2px+solid+#ff0000;
}

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

div.break-word+{
++word-break:+break-word;
}|335435|<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>|335436|335437|对于特定于浏览器的white-space版本，请使用：|335438|white-space:+pre-wrap;++++++/*+CSS3+*/
white-space:+-moz-pre-wrap;+/*+Firefox+*/
white-space:+-pre-wrap;+++++/*+Opera+<7+*/
white-space:+-o-pre-wrap;+++/*+Opera+7+*/|335439|entityMap^0|0|0|0|0|3|9|0|0|0|4|0|0|0|6|0|0|A|0|0|0|0|0|0|3|B|0|0|0|4|0|0|0|6|0|0|8|0|0|0|0|0|0|3|A|0|0|0|4|0|0|0|6|0|0|A|0|0|0|0|0|0|9|B|0|0^^$0|@$1|2|3|4|5|6|7|2F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|2G|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|2H|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|2I|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|2J|8|@$M|2K|N|2L|O|P]]|9|@]|A|$]]|$1|Q|3|R|5|6|7|2M|8|@]|9|@]|A|$]]|$1|S|3|T|5|6|7|2N|8|@$M|2O|N|2P|O|U]]|9|@]|A|$]]|$1|V|3|-4|5|6|7|2Q|8|@]|9|@]|A|$]]|$1|W|3|X|5|Y|7|2R|8|@$M|2S|N|2T|O|P]]|9|@]|A|$]]|$1|Z|3|10|5|Y|7|2U|8|@$M|2V|N|2W|O|P]]|9|@]|A|$]]|$1|11|3|12|5|6|7|2X|8|@]|9|@]|A|$]]|$1|13|3|14|5|6|7|2Y|8|@]|9|@]|A|$]]|$1|15|3|16|5|F|7|2Z|8|@]|9|@]|A|$G|H]]|$1|17|3|18|5|F|7|30|8|@]|9|@]|A|$G|H]]|$1|19|3|14|5|6|7|31|8|@]|9|@]|A|$]]|$1|1A|3|1B|5|6|7|32|8|@$M|33|N|34|O|P]]|9|@]|A|$]]|$1|1C|3|1D|5|6|7|35|8|@]|9|@]|A|$]]|$1|1E|3|T|5|6|7|36|8|@$M|37|N|38|O|U]]|9|@]|A|$]]|$1|1F|3|-4|5|6|7|39|8|@]|9|@]|A|$]]|$1|1G|3|1H|5|Y|7|3A|8|@$M|3B|N|3C|O|P]]|9|@]|A|$]]|$1|1I|3|1J|5|Y|7|3D|8|@$M|3E|N|3F|O|P]]|9|@]|A|$]]|$1|1K|3|1L|5|6|7|3G|8|@]|9|@]|A|$]]|$1|1M|3|14|5|6|7|3H|8|@]|9|@]|A|$]]|$1|1N|3|1O|5|F|7|3I|8|@]|9|@]|A|$G|H]]|$1|1P|3|1Q|5|F|7|3J|8|@]|9|@]|A|$G|H]]|$1|1R|3|14|5|6|7|3K|8|@]|9|@]|A|$]]|$1|1S|3|1T|5|6|7|3L|8|@$M|3M|N|3N|O|P]]|9|@]|A|$]]|$1|1U|3|1V|5|6|7|3O|8|@]|9|@]|A|$]]|$1|1W|3|T|5|6|7|3P|8|@$M|3Q|N|3R|O|U]]|9|@]|A|$]]|$1|1X|3|-4|5|6|7|3S|8|@]|9|@]|A|$]]|$1|1Y|3|1Z|5|Y|7|3T|8|@$M|3U|N|3V|O|P]]|9|@]|A|$]]|$1|20|3|21|5|Y|7|3W|8|@$M|3X|N|3Y|O|P]]|9|@]|A|$]]|$1|22|3|-4|5|6|7|3Z|8|@]|9|@]|A|$]]|$1|23|3|14|5|6|7|40|8|@]|9|@]|A|$]]|$1|24|3|25|5|F|7|41|8|@]|9|@]|A|$G|H]]|$1|26|3|27|5|F|7|42|8|@]|9|@]|A|$G|H]]|$1|28|3|14|5|6|7|43|8|@]|9|@]|A|$]]|$1|29|3|2A|5|6|7|44|8|@$M|45|N|46|O|P]]|9|@]|A|$]]|$1|2B|3|2C|5|F|7|47|8|@]|9|@]|A|$G|H]]|$1|2D|3|-4|5|6|7|48|8|@]|9|@]|A|$]]]|2E|$]]

<h1>Short Answer</h1>
<p>Simply use:</p>
<pre><code>word-wrap: break-word;
white-space: pre-wrap
word-break: break-word;
</code></pre>
<h1>Long Answer</h1>
<h2>1. <code>word-wrap</code></h2>
<p>Allows long words to be able to break and wrap onto the next line.</p>
<p><strong>Possible values:</strong></p>
<ul>
<li><code>normal</code>: Break words only at allowed break points</li>
<li><code>break-word</code>: Allows unbreakable words to be broken</li>
</ul>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>div {
    width: 150px; 
    border: 2px solid #ff0000;
}

div.normal {
    word-wrap: normal;
}

div.break {
    word-wrap: break-word;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h2&gt;word-wrap: normal&lt;/h2&gt;
&lt;div class="normal"&gt; This div contains a VeryLongWordWhichDoesNotFitToTheBorder.&lt;/div&gt;

&lt;h2&gt;word-wrap: break-word&lt;/h2&gt;
&lt;div class="break"&gt; This div contains a VeryLongWordWhichDoesNotFitToTheBorder.&lt;/div&gt;</code></pre>
</div>
</div>
</p>
<h2>2. <code>white-space</code></h2>
<p>Specifies how white-space inside an element is handled.</p>
<p><strong>Possible values:</strong></p>
<ul>
<li><code>nowrap</code>: Text will never wrap to the next line.</li>
<li><code>pre-wrap</code>: Whitespace is preserved by the browser. Text will wrap when necessary, and on line breaks</li>
</ul>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>div {
    width: 150px;
    border: 2px solid #ff0000;
}

div.nowrap {
    white-space: nowrap;
}

div.pre-wrap {
    white-space: pre-wrap;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h2&gt;white-space: nowrap&lt;/h2&gt;
&lt;div class="nowrap"&gt;This div contains a very long but normal paragraph with so many words and nothing else.&lt;/div&gt;

&lt;h2&gt;white-space: pre-wrap&lt;/h2&gt;
&lt;div class="pre-wrap"&gt;This div contains a very long but normal paragraph with so many words and nothing else.&lt;/div&gt;</code></pre>
</div>
</div>
</p>
<h2>3. <code>word-break</code></h2>
<p>Specifies how words should break when reaching the end of a line.</p>
<p><strong>Possible values:</strong></p>
<ul>
<li><code>normal</code>: default line break rules.</li>
<li><code>break-word</code>: To prevent overflow, word may be broken at arbitrary points.</li>
</ul>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>div {
  width: 150px; 
  border: 2px solid #ff0000;
}

div.normal {
  word-break: normal;
}

div.break-word {
  word-break: break-word;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h2&gt;word-break: normal (default)&lt;/h2&gt;
&lt;div class="normal"&gt; This div contains a VeryLongWordWhichDoesNotFitToTheBorder.&lt;/div&gt;

&lt;h2&gt;word-break: break-word&lt;/h2&gt;
&lt;div class="break-word"&gt; This div contains a VeryLongWordWhichDoesNotFitToTheBorder.&lt;/div&gt;</code></pre>
</div>
</div>
</p>
<p>For browser-specific versions of <code>white-space</code>, use:</p>
<pre><code>white-space: pre-wrap;      /* CSS3 */
white-space: -moz-pre-wrap; /* Firefox */
white-space: -pre-wrap;     /* Opera &lt;7 */
white-space: -o-pre-wrap;   /* Opera 7 */
</code></pre>


blocks|key|3100522|text|你可以用CSS来控制它，有几个选项：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3100523|如果文本溢出，请隐藏并放置滚动条if+|3100524|overflows+->+All+text+overflows+be+|unordered-list-item|3100525|overflows+->+put+scroll+|3100526|+text+overflows|3100527|3100528|希望能有所帮助。|3100529|entityMap^0|0|0|1|1|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|R|8|@]|9|@]|A|$]]|$1|G|3|H|5|F|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|U|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|V|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|O|$]]

<p>You can control it with CSS, there is a few options :</p>

<ul>
<li>hidden -> All text overflowing will be hidden.</li>
<li>visible -> Let the text overflowing visible.</li>
<li>scroll -> put scroll bars if the text overflows</li>
</ul>

<p>Hope it helps.</p>


blocks|key|3100639|text|还有另一个css属性：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3100640|white-space+:+normal;|code-block|syntax|javascript|3100641|空白属性控制如何在应用文本的元素上处理文本。|3100642|div+{

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

}|3100643|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>there is another css property :</p>

<pre><code>white-space : normal;
</code></pre>

<p>The white-space property controls how text is handled on the element it is applied to. </p>

<pre><code>div {

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

}
</code></pre>


blocks|key|336500|text|尝试添加此类以解决此问题：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|336501|.ellipsis+{
++text-overflow:+ellipsis;

++/*+Required+for+text-overflow+to+do+anything+*/
++white-space:+nowrap;
++overflow:+hidden;
}|code-block|syntax|javascript|336502|在此链接http://css-tricks.com/almanac/properties/t/text-overflow/中进行了进一步说明|offset|length|336503|entityMap|0|LINK|mutability|MUTABLE|url|http://css-tricks.com/almanac/properties/t/text-overflow/^0|0|0|4|1L|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<p>Try adding this class in order to fix the issue:</p>

<pre><code>.ellipsis {
  text-overflow: ellipsis;

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

<p>Explained further in this link <a href="http://css-tricks.com/almanac/properties/t/text-overflow/" rel="noreferrer">http://css-tricks.com/almanac/properties/t/text-overflow/</a></p>


blocks|key|335554|text|它现在是css属性：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|335555|335556|+word-break:+break-all|blockquote|offset|length|style|CODE|335557|335558|entityMap^0|0|0|1|L|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|N|8|@]|9|@]|A|$]]|$1|C|3|D|5|E|7|O|8|@$F|P|G|Q|H|I]]|9|@]|A|$]]|$1|J|3|-4|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|L|$]]

<p>It's now the css property:</p>
<blockquote>
<p><code>word-break: break-all</code></p>
</blockquote>


blocks|key|336387|text|overflow:+scroll？或自动。在style属性中。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|336388|entityMap^0|0|G|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

<p><code>overflow: scroll</code> ? Or auto. 
in the style attribute. </p>


blocks|key|338949|text|我想您应该从w3的基础知识开始|type|unstyled|depth|inlineStyleRanges|entityRanges|data|338950|https://www.w3schools.com/cssref/css3_pr_text-overflow.asp|offset|length|338951|div+{
++++white-space:+nowrap;+
++++overflow:+hidden;
++++text-overflow:+ellipsis;
}|code-block|syntax|javascript|338952|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|1M|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@$D|T|E|U|1|V]]|A|$]]|$1|F|3|G|5|H|7|W|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|C]]]]

<p>I guess you should start with the basics from w3</p>

<p><a href="https://www.w3schools.com/cssref/css3_pr_text-overflow.asp" rel="nofollow noreferrer">https://www.w3schools.com/cssref/css3_pr_text-overflow.asp</a></p>

<pre><code>div {
    white-space: nowrap; 
    overflow: hidden;
    text-overflow: ellipsis;
}
</code></pre>


blocks|key|335294|text|.NonOverflow+{
++++width:+200px;+/*+Need+the+width+for+this+to+work+*/
++++overflow:+hidden;
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|335295|<div+class="NonOverflow">
++++Long+Text
</div>|335296|unstyled|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|6|7|J|8|@]|9|@]|A|$B|C]]|$1|F|3|-4|5|G|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre class="lang-css prettyprint-override"><code>.NonOverflow {
    width: 200px; /* Need the width for this to work */
    overflow: hidden;
}
</code></pre>

<pre class="lang-html prettyprint-override"><code>&lt;div class="NonOverflow"&gt;
    Long Text
&lt;/div&gt;
</code></pre>


blocks|key|333857|text|如果您的div在css中设置了高度，将导致它溢出到div之外。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|333858|如果您需要div始终具有最小高度，您可以为div设置一个最小高度。|333859|不过，最小高度在IE6中不起作用，如果你有一个特定于IE6的样式表，你可以为IE6设置一个常规的高度。IE6中的高度会根据其中的内容进行更改。|333860|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|H|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|I|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|J|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|G|$]]

<p>If your div has a set height in css that will cause it to overflow outside of the div.</p>

<p>You could give the div a min-height if you need to have it be a minimum height on the div at all times.</p>

<p>Min-height will not work in IE6 though, if you have an IE6 specific stylesheet you can give it a regular height for IE6. Height changes in IE6 according to the content within.</p>


blocks|key|335461|text|您可以只在css中设置最小宽度，例如：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|335462|.someClass{min-width:+980px;}|code-block|syntax|javascript|335463|它不会被破坏，但是你仍然需要处理滚动条。|335464|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>You can just set the min-width in the css, for example:</p>

<pre><code>.someClass{min-width: 980px;}
</code></pre>

<p>It will not break, nevertheless you will still have the scroll-bar to deal with.</p>


blocks|key|3100872|text|关于如何捕获导致问题的CSS部分的建议：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3100873|1)在所有<div>元素上设置style="height:auto;"，然后重试。|offset|length|style|CODE|3100874|2)在所有的<div>元素上设置style="border:+3px+solid+red;"，看看你的<div>的盒子占据了多大的面积。|3100875|3)从你的css中去掉所有CSS+height:#px;属性并重新开始。|3100876|举个例子：|3100877|<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>|code-block|syntax|javascript|3100878|entityMap^0|0|5|5|F|K|0|6|5|G|U|1F|5|0|H|B|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@$D|W|E|X|F|G]|$D|Y|E|Z|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|10|8|@$D|11|E|12|F|G]|$D|13|E|14|F|G]|$D|15|E|16|F|G]]|9|@]|A|$]]|$1|J|3|K|5|6|7|17|8|@$D|18|E|19|F|G]]|9|@]|A|$]]|$1|L|3|M|5|6|7|1A|8|@]|9|@]|A|$]]|$1|N|3|O|5|P|7|1B|8|@]|9|@]|A|$Q|R]]|$1|S|3|-4|5|6|7|1C|8|@]|9|@]|A|$]]]|T|$]]

<p>Recommendations for how to catch which part of your CSS is causing the issue: </p>

<p>1) set <code>style="height:auto;"</code> on all the <code>&lt;div&gt;</code> elements and retry again. </p>

<p>2) Set <code>style="border: 3px solid red;"</code> on all the <code>&lt;div&gt;</code> elements to see how wide of an area your <code>&lt;div&gt;</code>'s box is taking up. </p>

<p>3) Take away all the css <code>height:#px;</code> properties from your CSS and start over. </p>

<p>So for example:</p>

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


blocks|key|335537|text|!！硬编码+tradoff前进!！根据周围的代码和屏幕分辨率，这可能会导致不同的/不想要的行为|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|335538|如果隐藏溢出是不可能的，并且需要正确的连字符，您可以使用软连字符HTML实体，在您希望单词/文本断开的地方。这样，您就能够手动预先确定一个断点。|335539|&shy;|code-block|syntax|javascript|335540|只有当单词需要断开以不溢出其周围的容器时，才会出现连字符。|335541|示例：|335542|<div+class="container">
++foo&shy;bar
</div>|335543|如果容器足够宽并且文本不会溢出容器，则会产生以下结果：|335544|foobar|335545|如果容器太小，并且文本实际上会溢出容器，则会产生以下结果：|335546|foo-
bar|335547|​|335548|.container{
++background-color:+green;
++max-width:+30px;
}|335549|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>|335550|335551|更多信息：https://en.wikipedia.org/wiki/Soft_hyphen|335552|entityMap|0|LINK|mutability|MUTABLE|url|https://en.wikipedia.org/wiki/Soft_hyphen^0|2|3|0|0|0|0|0|0|0|0|0|0|0|0|0|0|5|15|0|0^^$0|@$1|2|3|4|5|6|7|1H|8|@$9|1I|A|1J|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1K|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|1L|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|1M|8|@]|D|@]|E|$]]|$1|O|3|P|5|6|7|1N|8|@]|D|@]|E|$]]|$1|Q|3|R|5|J|7|1O|8|@]|D|@]|E|$K|L]]|$1|S|3|T|5|6|7|1P|8|@]|D|@]|E|$]]|$1|U|3|V|5|J|7|1Q|8|@]|D|@]|E|$K|L]]|$1|W|3|X|5|6|7|1R|8|@]|D|@]|E|$]]|$1|Y|3|Z|5|J|7|1S|8|@]|D|@]|E|$K|L]]|$1|10|3|11|5|6|7|1T|8|@]|D|@]|E|$]]|$1|12|3|13|5|J|7|1U|8|@]|D|@]|E|$K|L]]|$1|14|3|15|5|J|7|1V|8|@]|D|@]|E|$K|L]]|$1|16|3|11|5|6|7|1W|8|@]|D|@]|E|$]]|$1|17|3|18|5|6|7|1X|8|@]|D|@$9|1Y|A|1Z|1|20]]|E|$]]|$1|19|3|-4|5|6|7|21|8|@]|D|@]|E|$]]]|1A|$1B|$5|1C|1D|1E|E|$1F|1G]]]]

<p><em>!! <strong>Hard coded</strong> tradoff ahead !! Depending on the surrounding code and the screen resolution this could lead to different / unwanted behaviour</em> </p>

<p>If hidden overflow is out of the question and correct hyphenation is needed you could use the soft hyphen HTML entity where you want the word / text to break. This way you are able to predetermine a breaking point manually. </p>

<pre><code>&amp;shy;
</code></pre>

<p>The hyphen will only appear when the word needs to break to not overflow its surrounding container.</p>

<p>Example:</p>

<pre><code>&lt;div class="container"&gt;
  foo&amp;shy;bar
&lt;/div&gt;
</code></pre>

<p>Result if the container is wide enough and the text would not overflow the container: </p>

<pre><code>foobar
</code></pre>

<p>Result if the container is to small and the text would actually overflow the container:</p>

<pre><code>foo-
bar
</code></pre>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.container{
  background-color: green;
  max-width: 30px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>Example 1 - container to small =&gt; text overflows container:

&lt;div class="container"&gt;
  foobar
&lt;/div&gt;

Example 2 - using soft hyphen =&gt; text breaks at predetermined break point:

&lt;div class="container"&gt;
  foo&amp;shy;bar
&lt;/div&gt;

Example 3 - using soft hyphen =&gt; text still overflowing because the text before the soft hyphen is to long:

&lt;div class="container"&gt;
  foobar&amp;shy;foo
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>Further information: <a href="https://en.wikipedia.org/wiki/Soft_hyphen" rel="nofollow noreferrer">https://en.wikipedia.org/wiki/Soft_hyphen</a></p>


<p>How can I prevent text in a div block from overflowing in CSS?</p>
<p><strong>HTML:</strong></p>
<pre><code>&lt;div&gt;This div contains a VeryLongWordWhichDoesNotFitToTheBorder.&lt;/div&gt;
</code></pre>
<p><strong>CSS:</strong></p>
<pre><code>div {
    width: 150px;
    /* what to put here? */
}
</code></pre>


How to prevent text from overflowing in CSS?

容器

如何防止div块中的文本在CSS中溢出？HTML：<div>This div contains a VeryLongWordWhichDoesNotFitToTheBorder.</div>CSS:div {    width: 150px;    /* what to put here? */}

问如何防止CSS中的文本溢出？
EN

回答 15

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何防止CSS中的文本溢出？EN

回答 15

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何防止CSS中的文本溢出？
EN