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

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

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

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

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

in your css use white-space nowrap

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

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

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    lt span float  left  white-space  nowrap  overflow  hidden  onmouseover  rollOverImageSectionFiveThreeOne this   gt       lt input type  radio  id  radio4  name  p verify type  value  SomeValue     gt   lt  span gt   Just Your Text      lt span id  headerFiveThreeOneHelpText  float  left  white-space  nowrap  overflow  hidden  gt  lt  span gt

User · Answer

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

User · Answer

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

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

Examples related to html

Examples related to css