Can I prevent text in a div block from overflowing

Question

User · Answer

NonOverflow       width  200px     Need the width for this to work        overflow  hidden       lt div class  NonOverflow  gt      Long Text  lt  div gt

User · Answer

If your div has a set height in css that will cause it to overflow outside of the 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   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

User · Answer

If you want the overflowing text in the div to automatically newline instead of being hidden or making a scrollbar  use the   word-wrap  break-word   property

User · Answer

Simply use this     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        word-wrap  break-word          IE

User · Answer

I guess you should start with the basics from w3  https   www w3schools com cssref css3 pr text-overflow asp  div       white-space  nowrap       overflow  hidden      text-overflow  ellipsis

User · Answer

You can use the CSS property text-overflow to truncate long texts    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     reference  http   makandracards com makandra 5883-use-css-text-overflow-to-truncate-long-texts

User · Answer

Recommendations for how to catch which part of your CSS is causing the issue    1  set style  height auto   on all the  lt div gt  elements and retry again    2  Set style  border  3px solid red   on all the  lt div gt  elements to see how wide of an area your  lt div gt  s box is taking up    3  Take away all the css height  px  properties from your CSS and start over    So for example    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

User · Answer

You can try    lt div id  myDiv  gt      stuff   lt  div gt    myDiv       overflow hidden      Check out the docs for the overflow property for more information

User · Answer

there is another css property    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

User · Answer

It s now the css property   word-break  break-all

User · Answer

Hard coded tradoff ahead    Depending on the surrounding code and the screen resolution this could lead to different   unwanted behaviour   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     amp shy    The hyphen will only appear when the word needs to break to not overflow its surrounding container   Example    lt div class  container  gt    foo amp shy bar  lt  div gt    Result if the container is wide enough and the text would not overflow the container    foobar   Result if the container is to small and the text would actually overflow the container   foo- bar    x000D   x000D   container  x000D    background-color  green  x000D    max-width  30px  x000D    x000D  Example 1 - container to small   gt  text overflows container  x000D   x000D   lt div class  container  gt  x000D    foobar x000D   lt  div gt  x000D   x000D  Example 2 - using soft hyphen   gt  text breaks at predetermined break point  x000D   x000D   lt div class  container  gt  x000D    foo amp shy bar x000D   lt  div gt  x000D   x000D  Example 3 - using soft hyphen   gt  text still overflowing because the text before the soft hyphen is to long  x000D   x000D   lt div class  container  gt  x000D    foobar amp shy foo x000D   lt  div gt  x000D   x000D   x000D    Further information  https   en wikipedia org wiki Soft hyphen

User · Answer

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

User · Answer

overflow  scroll   Or auto   in the style attribute

User · Answer

You can control it with CSS  there is a few options     hidden -  All text overflowing will be hidden  visible -  Let the text overflowing visible  scroll -  put scroll bars if the text overflows   Hope it helps

User · Answer

You can just set the min-width in the css  for example    someClass min-width  980px     It will not break  nevertheless you will still have the scroll-bar to deal with

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

Examples related to html

Examples related to css

Examples related to overflow