31

When using CSS overflow: hidden , I've often found that the last line of text gets partially cut-off. Is there a way to prevent this so that any partial lines do not show-up. Almost like a vertical word-wrap.

3
  • 1
    provide an example? maybe mess with line height on the last element. Jul 10, 2010 at 20:58
  • 2
    He means the content is cut mid-line, so the top half of the characters show but not the bottom. AFAIK there's no fix for this, other than screwing with the line-height (which wouldn't be a cross browser solution anyway)
    – Rob
    Jul 10, 2010 at 21:02
  • why are you using overflow? to contain floats? or do you really need to hide stuff overflowing? Jul 10, 2010 at 21:02

8 Answers 8

15

You can use wrapper div and multi-column css:

.wrapper {
    -webkit-column-width: 150px; //You can't use 100%
    column-width: 150px;
    height: 100%;
}

Solution example: http://jsfiddle.net/4Fpq2/9/

Update 2017-09-21

In Firefox this solution still works but broken in Chrome. Recently Chrome started break column by small parts, also stop break content if you set height. In this http://jsfiddle.net/4Fpq2/446/ example, I change hight to max-height and show strange Chrome behavior. If you have ideas please write in comments.

Update 2019-03-25

Basically, it's work even for Chrome but you should have at least two lines. For a block with some amount of visible text this approach still should work fine.

http://jsfiddle.net/ncmo9yge/

4
  • Works for me. :) I can't get it to work with text-overflow:ellipsis, though. Is that possible? Jan 21, 2015 at 10:54
  • 1
    In this method, there is no overflow. Therefore, the text-overflow: ellipsis will not work. CSS Regions maybe can help but: caniuse.com/#feat=css-regions :(
    – stalkerg
    Jan 22, 2015 at 11:55
  • @Swen it still works for Firefox, please see an update.
    – stalkerg
    Sep 21, 2017 at 5:01
  • This is a really, really slick move, thanks for sharing!
    – Hank
    Nov 21, 2017 at 21:05
10

Once you understand how the column-width work, @stalkerg's answer makes a lot of sense.

The column-width splits the content in columns, so the last line of the text would not fit, it will be moved to the next column. Now the trick is to make the column-width as wide as the container. The container has overflow: hidden, so the 2nd column won't show.

.box {
    width: 200px;
}
.container {
    -webkit-column-width: 200vw;
    -moz-column-width:    200vw;
    column-width:         200vw;
    height:               100%;
}
2

This solution worked for me: https://stackoverflow.com/a/17413577/2540428 Essentially create a wrapper div with the appropriate padding and put the content in the main div where you edit its height and hide the overflow. See link for more details.

1

Rob is correct. I was making a div that had a max-height of 11em and the last line of overflow text was only half there. white-space: nowrap just eliminates that last line all together.

I tried

white-space: nowrap;

and Gaby is also correct that this causes problems too.

The best I came up with was to fiddle with the line-height and div height until the fewest lines were cut-off

2
  • 3
    this only works because your last line was produced by a long line wrapping. If there was an <br /> in it, it would still partially show .. You need to make sure that the height of the div can be exactly divided by its line-height .. Jul 10, 2010 at 21:10
  • Makes sense. I did make the height of the div something like 11em. Would that make any difference? Jul 11, 2010 at 15:33
1

that worked for me:

.wrapper_container{
    width: 300px;
    height: 200px;
    overflow: hidden;
}

.wrapper{
    -webkit-column-width: 300px;
    column-width: 300px;
    height: 100%;
}
2
  • Thanks this worked for me. The thing is that my width for wrapper_container is 50%, in other words varying. So in .wrapper, I changed -webkit-column-width: and column-width: to 500px, which is larger than my .wrapper container width will ever be. Well, it worked, but I'm a bit surprised. Do you think it's safe to do this?
    – flobacca
    Nov 30, 2018 at 1:26
  • Actually, my width varies from 220px to 390px. So I set column:width to 219px. It will be in one column when the outer container width is smallest and it will be one column when the outer container width is largest. I feel better about this, since I don't think text will be cut off. If you have time, I'd love to hear your opinion.
    – flobacca
    Nov 30, 2018 at 2:01
0

There are two css3 property exist. 1) word-break & 2) word-arap

Don't forget these are new property that is css3. So that older browsers do not support such property.

.class-name {word-break: break-all;}
.class-name {word-wrap: break-word;}
1
  • I don't know why this was downvoted, word-break: break-all fixed the particular I was having with the ellipses being cut off shorter than the container allowed. Jun 9, 2023 at 20:43
-1

just add column-width attribute and set width of the container, it will work.

-1

just use the border instead of padding.

1
  • Could you explain how you should use border instead of padding, with an example, preferably?
    – Smar
    Oct 18, 2019 at 8:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.