我可以防止div塊中的文本溢出嗎?

[英]Can I prevent text in a div block from overflowing?


Can I prevent text in a div block from overflowing?

我可以防止div塊中的文本溢出嗎?

14 个解决方案

#1


115  

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


60  

You can try:

你可以嘗試:

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

#myDiv {
    overflow:hidden;
}

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

查看文檔獲取溢出屬性以獲得更多信息。

#3


30  

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


15  

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


9  

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


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


4  

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


3  

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

溢出:滾動嗎?或汽車。樣式屬性。

#9


1  

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

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

#10


1  

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


0  

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


0  

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


0  

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


0  

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

希望這有助於


注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2009/07/22/f3dc66452e342263d60e5682847a38ed.html



 
粤ICP备14056181号  © 2014-2021 ITdaan.com