How to Completely Hide Lines of Text That Are Half Cut Off

Can I completely hide lines of text that are half cut off?

You can inspire you from the property text-overflow but you have to do it with JavaScript for multiples lines: http://pvdspek.github.com/jquery.autoellipsis/ (via With CSS, use "..." for overflowed block of multi-lines)

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

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>

Hide text if it doesn't fit in one line with CSS

1. Place your text in an inline-block inner-wrapper with white-space: nowrap to prevent line breaks.
2. Insert an empty inline-block pseudo-element before that inner-wrapper.
3. When the inner-wrapper is wider than the outer-wrapper, it will be moved to the second line of the outer-wrapper.
4. To hide it use overflow: hidden, and set the same value to height and line-height.

.outer-wrapper {  overflow: hidden;  height: 1.2em;  line-height: 1.2em;  border: 1px dotted black;  margin: 1em;}.outer-wrapper::before {  content: '';  display: inline-block;}.inner-wrapper {  display: inline-block;  white-space: nowrap;}

<div class="outer-wrapper">  <div class="inner-wrapper">    this is a short line  </div></div><div class="outer-wrapper">  <div class="inner-wrapper">    this is a super long line of text that it is never ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever ever going to fit on a single line!  </div></div>

text being cut in half when height changes

The easiest solution that involves the least JS is to set the height to clean multiples of the line-height of your element. line-height will define the available vertical space for each line of text (independent of the actual font size), and by setting the height to multiples of that value, you're assuring that text is never cut of except after a line.

// sets container height to 3 lines$('div').css('height', parseInt($('div').css('line-height')) * 3);

div {  height: 69px; /* starts with a non-clean multiple of line-height */  line-height: 20px;  overflow: hidden;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><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>

Cut off from the text if its too long

There's a way to do it using unofficial line-clamp syntax, and
starting with Firefox 68 it works with all major browsers.

.item_list_text {
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: N; /* number of lines to show */
}

body {
   margin: 20px;
}

.item_list_text {
  overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 3; /* number of lines to show */
   -webkit-box-orient: vertical;
}

<div class="item_list_text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam consectetur venenatis blandit. Praesent vehicula, libero non pretium vulputate, lacus arcu facilisis lectus, sed feugiat tellus nulla eu dolor. Nulla porta bibendum lectus quis euismod. Aliquam volutpat ultricies porttitor. Cras risus nisi, accumsan vel cursus ut, sollicitudin vitae dolor. Fusce scelerisque eleifend lectus in bibendum. Suspendisse lacinia egestas felis a volutpat.
        </div>

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

Using CSS to hide text that doesn't fit vertically

The only thing I know of is a -webkit-line-clamp. There may be other solutions for other browsers. You can also take a look at: http://css-tricks.com/line-clampin/

I would avoid that however and set the height to 2 lines of text if you can. So if the line-height is 15px, set the height to 30px for 2 lines, provided there isn't any other margins or padding.

---

Related Topics