How to adjust hidden text under overflow hidden div - html

Question

how to hide this last hidden text in css.
container style is:
.container{
overflow:hidden
}
Full code: JSFiddle

Answer 1

There are two approaches to this problem, the first is to use a simple fade-out (fading out is easier than masking since effective 'masking' involves knowing the explicit font-size of the given element as rendered), to that end I'd suggest the use of a pseudo-element, with ::after:
.container {
width: 100px;
height: 98px;
overflow: hidden;
border: 1px solid red;
position: relative;
}
.container::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
box-shadow: 0 0 10px 7px #fff;
}
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim</p>
</div>
This works by adding a pseudo-element to the bottom of the box, across its full width, and using box-shadow positioned over the top of the element's content with box-shadow providing the fade effect. The numbers (10px and 7px) are somewhat arbitrary, but it's a generally expected UI that it not be 'precise.'
An alternative, is to use JavaScript (you've said, in comments, that you can't change the height of the element) to set the line-height of the text to a value that causes the 'partially-hidden' line of text to be fully hidden. A naive approach to this, would be to use a function to divide the height of the element by the number of lines you wish to appear in that element, floor that number and then set the line-height of the element (via the style attribute) to that height:
function showOnlyCompleteLines(elem, lines) {
var computed = window.getComputedStyle(elem, null),
height = parseFloat(computed.height),
fontSize = parseFloat(computed.fontSize),
lineHeight = Math.floor(height / 6);
elem.style.lineHeight = lineHeight + 'px';
}
showOnlyCompleteLines(document.querySelector('div.container'));
.container {
width: 100px;
height: 98px;
overflow: hidden;
border: 1px solid red;
position: relative;
}
.container p {
margin: 0;
}
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim</p>
</div>
The disadvantage of this approach is that, of course, you have to manually declare the number of visible lines, which may, or may not, be appropriate to the user's screen.
References:
CSS:
Generated content, automatic numbering, and lists: The :before and :after pseudo-elements.
JavaScript:
HTMLElement.style.
Math.floor().
parseFloat().
Window.getComputedStyle().

Answer 2

Add the overflow height etc to the p element http://jsfiddle.net/shafips/0pgy7o5d/
p{
width:100px;
height:180px;
overflow:hidden;
border:1px solid red;
}

Answer 3

You need to adjust the height of the container to compensate for this. Else you will see that.
Soultion
Best way is to use JavaScript to count the characters and hide anything after that.