HTML CSS How to force div contents to stay in one line

Question

I have a long text inside a div with defined width   HTML    lt div gt Stack Overflow is the BEST     lt  div gt    CSS   div       border  1px solid black      width  70px      How could I force the string to stay in one line  i e  to be cut in the middle of  Overflow      I tried to use overflow  hidden  but it didn t help

User · Answer

I jumped here looking for the very same thing, but none worked for me.

There are instances where regardless what you do, and depending on the system (Oracle Designer: Oracle 11g - PL/SQL), divs will always go to the next line, in which case you should use the span tag instead.

This worked wonders for me.

<span float: left; white-space: nowrap; overflow: hidden; onmouseover="rollOverImageSectionFiveThreeOne(this)">
    <input type="radio" id="radio4" name="p_verify_type" value="SomeValue"  />
</span> 
Just Your Text || 
<span id="headerFiveThreeOneHelpText" float: left; white-space: nowrap; overflow: hidden;></span>

User · Answer

Try this   div       border  1px solid black      width  70px      overflow  hidden      white-space  nowrap

User · Answer

Use white-space nowrap and overflow hidden  http   jsfiddle net NXchy 8

User · Answer

Give this a try  It uses pre rather than nowrap as I would assume you would want this to run similarly to  lt pre gt  but either will work just fine   div       border  1px solid black      max-width  70px      white-space pre      http   jsfiddle net NXchy 11

User · Answer

div       display  flex      flex-direction  row       was the solution that worked for me  In some cases with div-lists this is needed   some alternative direction values are row-reverse  column  column-reverse  unset  initial  inherit which do the things you expect them to do

User · Answer

add this to your div  white-space  nowrap    http   jsfiddle net NXchy 1

User · Answer

Your HTML code   lt div gt Stack Overflow is the BEST     lt  div gt  CSS   div       width  100px      white-space nowrap      overflow hidden      text-overflow ellipsis      Now the result should be   Stack Overf

User · Answer

in your css use white-space nowrap

User · Answer

Try setting a height so the block cannot grow to accommodate your text  and keep the overflow  hidden parameter  EDIT  Here is an example of what you might like if you need to display 2 lines high   div       border  1px solid black      width  70px      height  2 2em      overflow  hidden

User · Answer

Everybody jumped on this one    I too made a fiddle    http   jsfiddle net audetwebdesign kh4aR   RobAgar gets a point for pointing out white-space nowrap first   Couple of things here  you need overflow  hidden if you don t want to see the extra characters poking out into your layout   Also  as mentioned  you could use white-space  pre  see EnderMB  keeping in mind that pre will not collapse white space whereas white-space  nowrap will

[html] HTML+CSS: How to force div contents to stay in one line?

Examples related to html

Examples related to css