如何做<p>标记自动换行？

Question

如上图所示。需要隐藏超出的单词和虚线需要显示。如何在css / angular js中进行这个自动换行。

Answer 1

您可以使用CSS中提供的文本溢出样式。

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

使用省略号修剪单词并显示点。

请参阅 Word wrapping in CSS

Answer 2

过滤

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

在视图中使用此过滤器

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

要在css中执行此操作，您可以使用省略号属性。 请访问此link

Answer 3

只需使用一个类进行裁剪，并将其应用于ng：

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

Answer 4

要在文本溢出容器时使用省略号切断文本，使用CSS需要将几个属性应用于容器（在本例中为<p>）：

1. 的 text-overflow: ellipsis;

这是定义实际显示（省略号或虚线的方式）。

以下是所有可能的展示广告类型的列表： text-overflow: clip|ellipsis|string|initial|inherit;

1. 的 overflow: hidden;

这告诉内容在溢出时切断。如果你没有设置它，文本将完全显示，不会被切断。

其他选项包括：overflow: visible|hidden|scroll|auto|initial|inherit;

1. 的 width:

您需要设置容器的垂直限制，即内容需要切断时的点。由于您使用的是省略号，因此需要将其计入宽度。

重要 ：对于要截止的内容，容器必须是块或内联块元素（例如，没有display: inline ）和width需要应用于px，而不是%。

1. 的 white-space: nowrap;

这告诉内容它在达到步骤3中设置的容器限制时不应换行。如果不设置此内容，则内容将简单地换行到下一行，并且不会应用任何文本溢出。

所有可能的空白区域值均为： white-space: normal|nowrap|pre|pre-line|pre-wrap|initial|inherit;

注意： 这会在容器结束时关闭文本，这有时会导致不太好的语言语法问题（例如单词）中途切断，或最后一个字和省略号之间的空格。）