Setting a Max Character Length in CSS

Limit characters displayed in span

Here's an example of using text-overflow:

.text {  display: block;  width: 100px;  overflow: hidden;  white-space: nowrap;  text-overflow: ellipsis;}

<span class="text">Hello world this is a long sentence</span>

How to set a max character length for a button with CSS without making the content added with ::after selector disappear?

Position the :after element to the right side.

button {    height: 21px;    max-width: 13ch;    text-overflow: ellipsis;    white-space: nowrap;    overflow: hidden;    position: relative;}button::after {    content: "\f0dc";    position: absolute;    right: 2px;    top: 2px;    display: inline-block;    font: normal normal normal 14px/1 FontAwesome;    font-size: inherit;    text-rendering: auto;    -webkit-font-smoothing: antialiased;    -moz-osx-font-smoothing: grayscale;}

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/><button>Hello Plunker!</button>

Limiting the number of characters per line with CSS

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;
}

How to set a maximum length to the characters displayed in a td

Try using:

str.substring(0,20)+"..."; }

It can solve your problem

How can I set a character limit for paragraph?

Try this:

.fifty-chars {    width: 50ch;    overflow: hidden;    white-space: nowrap;    text-overflow: ellipsis;}

<p class="fifty-chars">Short event description</p><p class="fifty-chars">Long long long long long long long long long     long long long long long long long long long long long long long    long event description</p>