102
<div style="display:inline-block;width:100px;">

very long text
</div>

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

cometta
  • 35,071
  • 77
  • 215
  • 324

6 Answers6

182

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;
Arseni Mourzenko
  • 50,338
  • 35
  • 112
  • 199
  • white-space: nowrap isn't really that necessary because I have multiple lines showing a long file path. Without white-space, the long unbreakable path will get the ellipsis, then the next line will show the rest of the path. The kicker is that I may copy the text (including ellipsis), and then it'll paste the entire path. Nice! – Rob Koch Dec 14 '12 at 20:02
  • In case you were wondering (like I was) ellipsis won't work in older versions of Firefox. "Since Firefox version 7 text-overflow: ellipsis is supported." http://stackoverflow.com/questions/5990414/how-to-make-cross-browser-css-ellipsis – PJ Brunet Mar 22 '13 at 17:13
  • what if you'd like to have a tooltip on hover to display the full text, or something alike? – pedrorijo91 Aug 18 '19 at 09:34
  • 2
    @pedrorijo91 You could simply use `title="full text goes here"` in the html. – Jerry Sep 13 '19 at 12:47
58
<div class="crop">longlong longlong longlong longlong longlong longlong </div>​

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.

Davor Lucic
  • 28,970
  • 8
  • 66
  • 76
  • 1
    I wouldn't count on "line-height" to prevent wrapping because it's possible the user has changed her font settings (for smaller text) in the browser. Likewise for large fonts, if you have fixed the height of the div to number of pixels, that could look terrible. Especially with mobile browsers and "retina" screens, I would try to leave the height of the div flexible if the design layout permits--which it should! – PJ Brunet Mar 22 '13 at 17:02
35
.crop { 
  overflow:hidden; 
  white-space:nowrap; 
  text-overflow:ellipsis; 
  width:100px; 
}​

http://jsfiddle.net/hT3YA/

Brandon
  • 68,708
  • 30
  • 194
  • 223
s1ntez
  • 571
  • 5
  • 4
14

Why not use relative units?

.cropText {
    max-width: 20em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
Zoe
  • 27,060
  • 21
  • 118
  • 148
Tomas Macek
  • 189
  • 1
  • 5
5

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.

Mizo Games
  • 189
  • 2
  • 8
  • 3
    While this code may answer the question, providing additional context regarding why and/or how this code answers the question improves its long-term value. – Donald Duck Mar 05 '17 at 15:29
3

   .cut_text {
      white-space: nowrap; 
      width: 200px; 
      border: 1px solid #000000;
      overflow: hidden;
      text-overflow: ellipsis;
    }
<div class="cut_text">

very long text
</div>
Supriya
  • 481
  • 5
  • 5