How to do <p> tag word wrapping?

Question

As shown in above image. The exceeding words needs to hide and dotted line need to show. How to do this word wrapping in css/angular js.

Answer 1

You can use text-overflow style available in CSS.

text-overflow: clip|ellipsis|string|initial|inherit;

Use ellipsis to trim the word and show dots.

See Word wrapping in CSS

Answer 2

Filter

app.filter('ellipsis', function() {
  return function(text, length) {
    if (text && text.length > length) { //if it is not null then check length
      return text.substr(0, length) + "........";
    }
    return text;
  }
});

Use this filter in view as

<span  ng-bind="post.post_content | ellipsis:200"></span>

To do it in css, you can use ellipsis property . please visit this link

Answer 3

Just use a class for the clipping and apply it with ng:

.is-clipped {               
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  white-space: nowrap;
}

Answer 4

To make the text cut off with ellipses when it overflows the container, with CSS you need to apply several properties to your container (in this case <p> ):

1. text-overflow: ellipsis;

This is what defines the actual display (the ellipsis, or the dotted lines the way you called them).

Here is the list of all possible display types: text-overflow: clip|ellipsis|string|initial|inherit;

2. overflow: hidden;

This tells the content to cut-off when it overflows. If you don't set this, the text will simply display in full, without cut-off.

Other options are: overflow: visible|hidden|scroll|auto|initial|inherit;

3. width:

You need to set the vertical limit of the container, ie the point when the content needs to cut-off. Since you are using ellipses, you need to factor this into the width.

IMPORTANT : For the content to cut-off, the container needs to be a block or inline-block element (eg no display: inline ) and width needs to be applied in px , not in % .

4. white-space: nowrap;

This tells content that it should not wrap when it reaches the container limit set in step 3. If you don't set this, the content will simply wrap to the next line, and none of the text-overflow will apply.

All possible white-space values are: white-space: normal|nowrap|pre|pre-line|pre-wrap|initial|inherit;

Note: This will cut the text off at the point where the container ends, which will sometimes result in not so nice language syntax issues (eg words cut off mid-way, or a space between the last word and the ellipses).