0

So, I Want to make a blog website design in which the content is shown up to something like only 80 words. I was wondering if there was a way in which I can break the text to certain words.

I've already tried using this

overflow:hidden;

but this works only for a single line which doesn't look good at all and I wanted Multiple lines of text in it.

Also, I was wondering if there was a way to do this without javascript cause I don't know javascript at all.

Thanks In Advance.

Heisenberg
  • 475
  • 8
  • 24
  • Actually, The answer is only valid for one line text which is kinda not what I wanted – Heisenberg Aug 23 '19 at 15:59
  • You're probably going to have a hard time with this unless you are using javascript or something server-side to truncate the text before hand. Css doesn't have anything that will count words or characters. – ryan28561 Aug 23 '19 at 16:18

1 Answers1

1

You can use overflow: hidden for multiple lines too. Here an example:

p {
  /* the line height must be known */
  line-height: 2.5ex;
}

p.truncated {
  /* restrict the height to three lines */
  height: calc(2.5ex * 3);

  /* hide the overflow */
  overflow: hidden;
}
<p class=truncated>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ipsum dolor sit amet consectetur
adipiscing elit ut aliquam purus. In mollis nunc sed id semper risus.  At lectus
urna duis convallis convallis tellus id interdum velit. Metus vulputate eu
scelerisque felis imperdiet proin fermentum leo vel. Pellentesque pulvinar
pellentesque habitant morbi tristique. Tellus mauris a diam maecenas sed enim.
Curabitur gravida arcu ac tortor. Dolor magna eget est lorem. Quis risus sed
vulputate odio ut enim blandit volutpat maecenas. Rutrum q uisque non tellus orci
ac auctor augue mauris. Eget mauris pharetra et ultrices. Malesuada fames ac
turpis egestas integer eget aliquet. Ut porttitor leo a diam sollicitudin tempor
id. Vestibulum rhoncus est pellentesque elit ullamcorper.
</p>

Adding an ellipsis character (that is …) doesn't seem to be possible without relying on browser specific features. The linked duplicate explains how this can be done.

asynts
  • 2,213
  • 2
  • 21
  • 35