我可以防止div块中的文本溢出吗?

Can I prevent text in a div block from overflowing?

我可以防止div块中的文本溢出吗?

14 个解决方案

#1

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

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

word-wrap: break-word

自动换行:break-word

property.

财产。

#2

You can try:

你可以尝试:

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

#myDiv {
    overflow:hidden;
}

Check out the docs for the overflow property for more information.

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

#3

You can use the CSS property text-overflow to truncate long texts.

您可以使用CSS属性文本溢出来截断长文本。

<div id="greetings">
  Hello universe!
</div>

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

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

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

#4

You can control it with CSS, there is a few options :

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

• hidden -> All text overflowing will be hidden.
• 所有文本溢出将被隐藏。
• visible -> Let the text overflowing visible.
• 可见->允许文本溢出可见。
• scroll -> put scroll bars if the text overflows
• 滚动->放置滚动条如果文本溢出

Hope it helps.

希望它可以帮助。

#5

there is another css property :

还有另一个css属性:

white-space : normal;

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

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

div {

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

}

#6

Simply use this:

简单地使用这个:

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

#7

Try adding this class in order to fix the issue:

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

.ellipsis {
  text-overflow: ellipsis;

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

Explained further in this link http://css-tricks.com/almanac/properties/t/text-overflow/

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

#8

overflow: scroll ? Or auto. in the style attribute.

溢出:滚动吗?或汽车。样式属性。

#9

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

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

#10

You can just set the min-width in the css, for example:

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

.someClass{min-width: 980px;}

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

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

#11

Yes. You can use CSS - There are a bunch of values you can use..

是的。你可以使用CSS -你可以使用很多值。

http://www.w3schools.com/Css/pr_pos_overflow.asp

http://www.w3schools.com/Css/pr_pos_overflow.asp

inkedmm is right, that might be the behavior you want, but you should determine if that is the case.

inkedmm是正确的，这可能是您想要的行为，但是您应该确定是否这样。

#12

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

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

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

你可以给div一个最小的高度，如果你需要它在任何时候都是一个最小的高度。

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.

在IE6中，最小高度不能工作，如果你有一个特定于IE6的样式表，你可以给它一个常规的IE6高度。IE6的高度随内容的变化而变化。

#13

Recommendations for how to catch which part of your CSS is causing the issue:

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

1) set style="height:auto;" on all the <div> elements and retry again.

1)设置style="height:auto;"对所有

元素重新重试。

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

2)Set style="border: 3px solid red "，在所有

元素上，看看你的

's box的范围有多大。

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

3)去掉所有css高度:#px;属性，从CSS开始重新开始。

So for example:

举个例子:

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

#14

I guess you should start with the basics from w3

我想你应该从w3开始

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

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

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

Hope this helps

希望这有助于