[分享]css内容显示两行超出显示点点点

在网页设计中，如果内容过长，需要截取并显示部分内容，在此情况下，我们可以使用 CSS 的截断文本的方法。这种方法能够让我们在保留部分内容的同时，将多余的文本以省略号（...）的形式呈现。下面的示例展示...

在网页设计中，如果内容过长，需要截取并显示部分内容，在此情况下，我们可以使用 CSS 的截断文本的方法。这种方法能够让我们在保留部分内容的同时，将多余的文本以省略号（...）的形式呈现。

下面的示例展示了如何使用 CSS 来让内容超过两行后用省略号代替：

 .ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box; /* 将对象作为弹性伸缩盒子模型展示 */
    -webkit-line-clamp: 2; /* 显示两行 */
    -webkit-box-orient: vertical; /* 从上到下排列，即垂直排列 */
  } 

使用上述 CSS 样式，可以让对象在没有高度限制的情况下，将内容按行划分，指定要显示的行数，多余的内容将以省略号代替。

在实际编写网页时，我们可以将想要被截断的内容使用一个容器包裹起来，并将该容器应用上述 CSS 样式。例如：

 <div class="ellipsis">
    <p>这是一段内容，如果超过两行，那么我就会被截断以省略号代替。</p>
  </div> 

在以上示例中，我们将一段内容放在 div 容器中，并为该容器应用了指定的 CSS 样式，这样就可以保证内容在超过两行后被截断。

总之，使用 CSS 的截断文本的方法，可以很好地解决长内容的显示问题，同时也让我们的网页看起来更加美观和专业。