1

I have a text inside the div. When I adjust the zoom level of the page, the text inside the div moves out of the div.I required the text to remain in the div as it is and not adjust the width of the div.

my div is :

    <div style="width: 463px; 
height: auto; 
min-height: 0px; 
overflow: visible; 
border: 3px dashed rgb(2, 158, 217); 
margin-left: 18px; 
max-width: 466px; 
color: rgb(0, 0, 0); 
font-size: 12px; 
font-family: arimo; 
font-weight: 400; 
font-style: normal; 
text-align: start;
 white-space: nowrap; 
line-height: 1.231;
padding-left: 3.5px;" wrap="off" name="nowrap" id="changedtext5" class="textdrag">asdksjadksja&nbsp;kldjaslkjd&nbsp;jasdiwie&nbsp;qowyruasdasd&nbsp;kajskjd&nbsp;kjaskldjlka;sdioewyriosudfrds</div>
Bhumi Singhal
  • 8,063
  • 10
  • 50
  • 76
  • remove the width of the div in style tag – Naveen Kumar Alone Feb 20 '13 at 07:34
  • 3
    As a side note: You shouldn't rely on zooming in or out in a browser to the page will look on different resolutions. The calculations done by browsers are unreliable and often rounded up, therefore some layout misbehavior may appear, despite having proper html/css syntax. – Maciej Gurban Feb 20 '13 at 09:46
  • Yeah but the silly clients will not listen to this an ....they want ROI ..so much so that I need to even provide compatibility with IE7 – Bhumi Singhal Feb 20 '13 at 10:49
  • Nothing pleasant, but to be honest, they are kinda in the right. Many people actually use zooming in and out and for them the website will be just broken. The only (painful) solution I could provide is http://stackoverflow.com/questions/1713771/how-to-detect-page-zoom-level-in-all-modern-browsers and applying different styles in different zoom levels. – Maciej Gurban Feb 20 '13 at 17:05

1 Answers1

0

overflow:visible; allows the text to escape the confines of the divider. Setting this to overflow:hidden; will hide any text which does manage to move outside of the divider.

I don't know if this is a solution you're after as it would end up hiding text.

If instead you want it to scroll, use overflow-x:scroll;.

James Donnelly
  • 126,410
  • 34
  • 208
  • 218
  • 2
    Actually both the options are not favourable.I would like to have something which forces the text to stay inside the div without any spill and scrollbar. – Bhumi Singhal Feb 20 '13 at 10:51