Limiting the number of characters per line with CSS

Question

I have a paragraph of text    lt p gt Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lt  p gt    How can I make sure that no more than 30 characters are shown on one line with CSS

User · Answer

If you use CSS to select a monospace font  the problem of varying character length is easily solved

User · Answer

A better solution would be you use in style css  the command to break lines  Works in older versions of browsers   p   word-wrap  break-word

User · Answer

Another approach to this would put a span element with a display block style inside the p element each time you need the content to break  It would only be useful when your p content is static    lt p gt this is a not-dynamic text and I want to put lt span style  display block  gt the following words in the next line lt  span gt and these other words in a third one lt  p gt    It would output      This is a not-dynamic text and I want to put      the following words in the next line      and these others in a third one   This allows you to change your text line-breaks in different viewports without JS

User · Answer

The latest way to go is to use the unit  ch  which stands for character   You can simply write    p     max-width  75ch     The only trick is that whitespaces won t be counted as characters    Check also this post  https   stackoverflow com a 26975271 4069992

User · Answer

That s not possible with CSS  you will have to use the Javascript for that  Although you can set the width of the p to as much as 30 characters and next letters will automatically come down but again this won t be that accurate and will vary if the characters are in capital

User · Answer

You could do this   Note  This is CSS3 and the browser support   good         p       text-overflow  ellipsis     will make       at the end        width  370px     change to your preferences        white-space  nowrap     paragraph to one line        overflow hidden     older browsers

User · Answer

Depending on what font you re using you can set max-width on the paragraph with a calculated value  It will not be exact  but I ve found that in most cases that does not matter   p     max-width  calc 30em   0 5       The number you multiply with depends on what font it is  and how much a character takes up in a em square  More characters   less accurate

[html] Limiting the number of characters per line with CSS

Examples related to html

Examples related to css