35

I have a paragraph of text:

<p>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</p>

How can I make sure that no more than 30 characters are shown on one line with CSS?

Pieter
  • 31,619
  • 76
  • 167
  • 242
  • I possibly would help if you said why you need to do this. – RoToRa May 03 '10 at 11:09
  • It's part of a kinda odd class assignment. Not my idea. From the book Programming The World Wide Web 2009: "The document must have a paragraph of at least 20 lines of text that describe you. This paragraph must be centered on the page and have space for 30 characters per line only. (...)" – Pieter May 03 '10 at 12:03
  • 3
    Oh, you want a 30 characters maximum, not exactly 30 characters per line. I guess the book is going for `width: 30em`, although that is not really exactly correct. My guess would be that it's a badly written question (or even a badly written book). – RoToRa May 03 '10 at 12:51

8 Answers8

83

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 */
    }
Alex
  • 986
  • 1
  • 8
  • 5
  • 5
    Hint: Using `max-width: XXXpx;` is the better choice for dynamic tables. – Sliq Oct 28 '13 at 13:11
  • Something that isn't immediately clear is that this does not seem to work on all HTML elements. At first, I had an anchor element and it would not work as designed. – JDennis Feb 19 '15 at 19:11
  • I like `max-width` too. Along with `em` this can be made scalable too. This method will depend on how big the developer makes the font; a reasonable facsimile can be made though: `p { max-width:40em; }`. – Todd Partridge Feb 15 '17 at 15:46
23

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. Just see this example:

p {
  max-width: 30ch;
}
Abhirajshri Winsome
  • 165
  • 1
  • 13
Sarfraz
  • 377,238
  • 77
  • 533
  • 578
  • So how would I go about doing this in JS? Is it complicated or is it just a one-liner? – Pieter May 03 '10 at 10:55
  • @Pieter: you can use the javascript's `substr` function for that i suppose and it won't be a single liner (unless a regex might do the trick) but i would suggest you to just setting the width of the paragraph if the requirement is not that strict. – Sarfraz May 03 '10 at 11:10
  • 1
    +1 That is how I solve this problem -- only annoyance, most fonts are variable width, so if some wonderful person puts in MMMMMMMM... they usually break your design or have overflow. If you make the

    the width of 30 Ms, then there is ofter a lot of space at the end of the div. You need to make a judgement call.

     – Christopher Altman May 03 '10 at 11:17
  • 1
    This answer is incorrect. The correct answer is to set the max-width property to some number of "ex" units. For example, max-width: 30ex should do what the question requires. – Christopher Aug 26 '13 at 12:49
  • 2
    @Christopher The question is to limit the number of characters, not the width of the paragraph. Characters have different widths. You could argue that setting max-width would be a better idea, but it's not the question at hand. – Conor Pender Apr 14 '14 at 15:59
20

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

Nasia Makrygianni
  • 761
  • 1
  • 11
  • 19
  • 1
    Notice that `ch` represents the width of the 0 character in the given font. In monospace fonts, all the characters will have the same width, so adding `max-width: 75ch` will effectively limit the number of characters per line to 75. But in non-monospace fonts the letter count may differ from line to line (as the i is narrower than the m, for example). – Alvaro Montoro Aug 09 '19 at 19:42
10

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

Pino
  • 178
  • 5
6

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.

Dan Andreasson
  • 15,380
  • 5
  • 29
  • 30
2

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;
}
user3280419
  • 21
  • 1
0

I saw lots of answers above and its work.

In addition, This also works for me.

p {
    overflow-wrap: break-word;
  }
Tharindu Lakshan
  • 3,995
  • 6
  • 24
  • 44
-7

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.

<p>this is a not-dynamic text and I want to put<span style="display:block">the following words in the next line</span>and these other words in a third one</p>

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.

Felipe Bernardes
  • 59
  • 5