Clever Geek Handbook

Hiding partially overflowing text in a multiline div?

How do I remove or hide a partially overflowed line of text? Example:

Html:

<div>Lot of interesting text in this multi-line box but how do I remove or hide the last line</div>

Css:

div {
    border: 1px solid black;
    height:65px;
    width:150px;
    overflow:hidden;
}

https://jsfiddle.net/7mudnnco/

Edit: Image of how I want the result:

Image of how I want the result

Edit2: This similar question has an almost working solution, but I am looking for a solution where all lines are hidden when the line is not fully visible. Almost working solution: http://jsfiddle.net/4Fpq2/9/ (Change the height to 15px to see why it doesn't work completely)

+3


source to share


2 answers


If the font size and window size are known, you can simply create the window to contain exactly 3 lines of text, one way to do it:



div {
    border: 1px solid black;
    height:65px;
    width:150px;
    overflow:hidden;
    line-height: 22px;   
}
+2


source


Like this:

div {
    border: 1px solid black;
    line-height: 2.5ex; /* <-- default value */
    height: 7.5ex;      /* 3 * 2.5ex = 7.5ex (3 rows) */
    width:150px;
    overflow:hidden;
}


JSFiddle

0


source






More articles:


All Articles