CODEWITHSUNDEEP
csssass
jdawg
jdawg

Reputation: 23

Truncate text on line number N CSS

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?

Upvotes: 1

Views: 908

Answers (2)

user5201742
user5201742

Reputation:

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/

Upvotes: 1

raduken
raduken

Reputation: 2119

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/

Upvotes: 0

Related Questions