crop text too long inside div

Question

lt div style  display inline-block width 100px   gt   very long text  lt  div gt    any way to use pure css to cut the text that is too long rather than show on next new line and only show max 100px

User · Answer

crop      overflow hidden     white-space nowrap     text-overflow ellipsis     width 100px        http   jsfiddle net hT3YA

User · Answer

lt div class  crop  gt longlong longlong longlong longlong longlong longlong  lt  div gt     This is one possible approach i can think of   crop  width 100px overflow hidden height 50px line-height 50px      This way the long text will still wrap but will not be visible due to overflow set  and by setting line-height same as height we are making sure only one line will ever be displayed   See demo here and nice overflow property description with interactive examples

User · Answer

You can use   overflow hidden    to hide the text outside the zone   Note that it may cut the last letter  so a part of the last letter will still be displayed   A nicer way is to display an ellipsis at the end  You can do it by using text-overflow   overflow  hidden  white-space  nowrap     Don t forget this one    text-overflow  ellipsis

User · Answer

x000D   x000D      cut text   x000D        white-space  nowrap   x000D        width  200px   x000D        border  1px solid  000000  x000D        overflow  hidden  x000D        text-overflow  ellipsis  x000D        x000D   lt div class  cut text  gt  x000D   x000D  very long text x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Below code will hide your text with fixed width you decide  but not quite right for responsive designs    CropLongTexts     width  170px    white-space  nowrap    overflow  hidden    text-overflow  ellipsis         Update   I have noticed in  mobile  device s  that the text  mixed  with each other due to  fixed width     so i have edited the code above to become hidden responsively as follow    CropLongTexts     max-width  170px    white-space  nowrap    overflow  hidden    text-overflow  ellipsis      The  max-width  ensure the text will be hidden responsively whatever the  screen size  and will not mixed with each other

User · Answer

Why not use relative units    cropText       max-width  20em      white-space  nowrap      overflow  hidden      text-overflow  ellipsis

[html] crop text too long inside div

Examples related to html

Examples related to css