2

What is the best way to truncate text(or line clamp) on a specific row?

Lets say I have a paragraph with 8 lines of text but I only want to show 3?

Is this possible via CSS or do I need something else?

jdawg
  • 43
  • 1
  • 7
  • 1
    check this [blog](http://hackingui.com/front-end/a-pure-css-solution-for-multiline-text-truncation/) and [codepen example](https://codepen.io/martinwolf/pen/qlFdp) – Venugopal May 13 '16 at 10:41
  • Nice post @Venugopal, seems to be exactly what I was looking for! – jdawg May 13 '16 at 10:49
  • I have made a solution for this one at: https://stackoverflow.com/a/50069668/1422380 – Alexis Duran Apr 27 '18 at 20:14

2 Answers2

1

Set line-height, and max-height as multiple for n rows you want to show. For example, if line-height is 30px, only show 2 lines:

HTML

<p class="text">
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
</p>

CSS

.text {
  line-height: 30px;
  max-height: 60px;
  overflow: hidden;
}

Example: https://jsfiddle.net/rk8y0rsd/

0

Yes, it is simple, look the example bellow.

html:

<div class="i-speak-too-much">
  Hello I like speak, I live in the future  I am the Universe
</div>

css:

.i-speak-too-much {
  width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; //making dots
  }

jsfiddle: https://jsfiddle.net/ot9excbr/

raduken
  • 2,091
  • 16
  • 67
  • 105
  • Yes, that works for 1 line, but imagine if your text is 7 lines and you want to display 3.. text-overflow: ellipsis breaks the first line, is it possible to change that to the n:th row? – jdawg May 13 '16 at 10:45
  • I know how to trim to text to a max amount of line-heights. but how would I add an ellipsis? The above code only works if limited to 1 line. – Auxiliary Joel Apr 10 '19 at 02:41