css overflow - only 1 line of text

Question

I have div with the following css style   width 335px  float left  overflow hidden  padding-left 5px    When I insert  into that div  a long line of text  it s breaking to a new line and displays all the text   What I want is to have only one line of text that will not line-break   When the text is long  I want this overflowing text to disappear   I was thinking about setting the height but it seems to be wrong   Maybe if I add height that is the same as the font  it should work and not cause any problems in different browsers   How can I do that

User · Accepted Answer

If you want to restrict it to one line  use white-space  nowrap  on the div

User · Answer

the best code for UX and UI is  white-space  nowrap  text-overflow  ellipsis  overflow  hidden  display  inherit

User · Answer

You can use this css code   text-overflow  ellipsis   overflow  hidden   white-space  nowrap    The text-overflow property in CSS deals with situations where text is clipped when it overflows the element s box  It can be clipped  i e  cut off  hidden   display an ellipsis         Unicode Range Value U 2026    Note that text-overflow only occurs when the container s overflow property has the value hidden  scroll or auto and white-space  nowrap    Text overflow can only happen on block or inline-block level elements  because the element needs to have a width in order to be overflow-ed  The overflow happens in the direction as determined by the direction property or related attributes

User · Answer

if addition please  if you have a long text please you can use this css code bellow   text-overflow  ellipsis  overflow  visible  white-space  nowrap    make the whole line text visible

User · Answer

width 200px  white-space  nowrap  text-overflow  ellipsis  overflow  hidden    Define width also to set overflow in one line

User · Answer

I was able to achieve this by using the webkit-line-clamp and the following css  div     display  -webkit-box    -webkit-line-clamp  1    -webkit-box-orient  vertical    overflow  hidden

User · Answer

I had the same issue and I solved it by using   display  inline-block    on the div in question

User · Answer

If you want to indicate that there s still more content available in that div  you may probably want to show the  ellipsis    text-overflow  ellipsis    This should be in addition to white-space  nowrap  suggested by Septnuits   Also  make sure you checkout this thread to handle this in Firefox

[html] css overflow - only 1 line of text

Examples related to html

Examples related to css

Examples related to overflow