Setting a max character length in CSS

html css text
Sharif1111 picture Sharif1111 · Nov 17, 2014 · Viewed 477.5k times · Source

I am making responsive website for school and my question is:

How do I set a max character length of the sentences (with CSS) on my website (like 75 characters) that when I have a very large screen, the sentences wont go further than 75 characters.

I have tried a max width but that messes up my layout. I am using flexbox and media queries to make it responsive.

Answer

Vangel Tzo picture Vangel Tzo · Nov 17, 2014

You could always use a truncate method by setting a max-width and overflow ellipsis like this

p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

An example: http://jsfiddle.net/3czeyznf/

For a multi line truncation have a look at a flex solution. An example with truncation on 3 rows.

p {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

An example: https://codepen.io/srekoble/pen/EgmyxV

Related questions

HTML: Changing colors of specific words in a string of text

I have the below message (slightly changed): "Enter the competition by January 30, 2011 and you could win up to $$$$ — including amazing summer trips!" I currently have: <p style="font-size:14px; color:#538b01; font-weight:bold; font-style:italic;"> formatting the text …

Read More
Vertical Text Direction

I have been trying text to go in a vertical direction like we can do in ms-word tables but so far I have only been able to do THIS... which I am not happy with because it's a box rotated... …

Read More
How can I align text directly beneath an image?

I used to know how to put an image on top and then justify the text below the image so that it stays within the borders of the width of the image. However, now I have no idea how to …

Read More