Css: Can You Prevent Overflow: Hidden from Cutting-Off the Last Line of Text

Prevent overflow:hidden from cutting text in the middle when using flexbox column

You have to make the height a mutliple of the height of one line. Here is an example using CSS grid.

Resize the main container to see the magic:

.card {
  display: flex;
  flex-direction: column;
  height: 192px;
  width: 300px;
  border: 1px solid;
  padding: 12px;
  overflow: hidden;
  resize: both;
}

.title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 8px;
}

.body {
  flex: 1 1 auto;
  margin-bottom: 8px;
  line-height: 1.2em; /* height of one line */
  display: grid;
  grid-template-rows: repeat(auto-fit, 1.2em); /* same as line-height here */
  grid-auto-rows: 0;
}

.body>div {
  grid-row: 1/-1;
  overflow: hidden;
}

<div class="card">
  <div class="title">
    This is a title
  </div>
  <div class="body">
    <div>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
  </div>
  <div>
    footer text
  </div>
</div>

Text Overflow - Prevent from clipping letters in half

.test {

  width: 44px;

  height: 18px;

  word-break: break-all;

  overflow: hidden;

  border: 1px solid #000000;

}

<div class="test">HelloWorld!</div>

Overflow hidden text gets cut off

You can offset the font by using relative positioning for the span and adjusting the CSS property top:-9px to achieve the required offset.

Idea obtained from the below answer.

SO Answer

CSS:

div {
    overflow: hidden;
    margin-bottom: 1rem;

    > span {
        display: block;
        font-size: 5rem;
        top: -9px;
        position: relative;
        font-weight: bold;
        line-height: 1;
        transform: translateY(100%);
        transition: all .3s;

        &.active {
            transform: translateY(0);
        }
    }
}

Codepen Demo

Text cropping when using overflow: hidden

To answer the question of why this happens, I think the key is this particular phrase from the Fonts section of the CSS 2.1 spec (emphasis mine):

The font size corresponds to the em square, a concept used in typography. Note that certain glyphs may bleed outside their em squares.

The line-height: 1 declaration sets the height of the paragraph to the same height as the font-size (since the paragraph only has one line). The fact that some characters are cut off implies that their glyphs bleed outside their em squares (I don't know how to definitively prove that this is true; I'm just speculating based on the evidence).

As for a solution, the most straightforward solution would be to use a larger line-height setting, such as 1.1 or 1.2.

Avoiding text/characters being chopped off vertically

I have written you some very nice jQuery to calculate the number of lines that could be visible and then restrict it to that amount

$(".thumbnail-text").each(function() {
  //start with 0 height
  h=0;
  //calculate height consumed by title
  $(this).find("h3").each(function() {
    h+=$(this).outerHeight();
  });
  //calculate height left over for text
  h=160-h;
  //determine the line height of the text
  lineHeight=parseFloat($(this).find("p").first().css("line-height"));
  //determine the amount of lines that can fit in the height left for the text
  lines=Math.floor(h/lineHeight);
  //set the height of the 'p' to be the lines * lineHeight
  $(this).find("p").first().css("height",(lines*lineHeight)+"px");
});

I also changed your css a bit so now the p element is set to overflow:hidden and has the margin-bottom

.thumbnail-text p {
  overflow: hidden;
  margin-bottom: 10px;
}

Link -> http://www.bootply.com/1pZoRkUHOj

I know it is a very case specific solution but the concept behind the solution will work for anything

Sentence showing half at end of the div, overflow: hidden is cutting the sentence

use white-space: nowrap; for your div to show the text in one line.this way, it'll hide the extra text that comes in your div of fixed width as you have hidden the overflow

check this for ref :

http://css-tricks.com/almanac/properties/w/whitespace/

https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

http://www.w3schools.com/cssref/pr_text_white-space.asp

---

Related Topics