Html 如何做<；p>；标签词包装？

---

如上图所示。超出的单词需要隐藏，虚线需要显示。如何在css/angular js中包装这个单词。

过滤器

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中执行此操作，可以使用省略号属性。

---

请访问此

只需使用一个类进行剪辑并将其与ng一起应用：

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

---

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

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

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

看

---

要在文本溢出容器时用省略号将其截断，使用CSS，您需要对容器应用多个属性（在本例中为

）：

文本溢出：省略号

这就是定义实际显示的内容（省略号或您称之为虚线的方式）

以下是所有可能显示类型的列表：

text overflow:clip |省略号| string | initial | inherit

溢出：隐藏

这会告诉内容在溢出时被切断。如果不设置此选项，文本将完全显示，不带截止线

其他选项有：
overflow:visible | hidden | scroll | auto | initial | inherit

宽度：
您需要设置容器的垂直限制，即内容需要切断的点。因为您使用的是椭圆，所以需要将其考虑到宽度中

重要：对于要切断的内容，容器需要是块或内联块元素（例如，no
显示：内联
），并且
宽度
需要应用于
px
，而不是
%

空白：nowrap

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

所有可能的空白值为：
空白：正常| nowrap | pre | pre | pre line | pre wrap | initial | inherit

注意：这将在容器结束处截断文本，这有时会导致不太好的语言语法问题（例如，在中间截断单词，或在最后一个单词和省略号之间留出空格）.
使用
文本溢出：省略号
，或者您可以使用自定义筛选器，该筛选器将对值进行修剪，您无法限制该值仅应用于单词。它将省略必要的地方，即使在中间的词。你的意思是NG绑定足够了吗？是的，代码< NG绑定< /代码>就够了。因为你的内容没有Nave<代码> HTML<代码> TaGySype过滤器在值“<代码> null < /Calp>空”时会抛出一个错误，NULL意味着它只会回退NULL。我认为这不会造成错误。如果是，我已经编辑了代码。请评论nw
text.length
将被评估为
null.length
这将抛出错误
未捕获类型错误：无法读取null的属性“length”
请用null值结束此代码