如何实现网页两行文字省略并跟随动态块状内容？

实现网页两行文字省略并跟随动态块状内容

如何在网页上实现两行文字省略并跟随动态块状内容？本文将介绍如何使用 CSS 和少量 JS 来实现这一效果，同时兼容主流浏览器。

方法

首先，设置文字容器的 : hidden，这将限制文字溢出。

然后，为第一行和第二行设置 text-overflow: ellipsis，这将省略超出容器范围的文字。

最后，使用 JS 动态调整容器的高度以适应动态内容。

示例代码如下：

<div id="text-container">
  <p>第一行</p>
  <p>第二行</p>
  @@##@@
</div>

登录后复制

#text-container {
  overflow: hidden;
  width: 200px;
}

#text-container p {
  text-overflow: ellipsis;
}

登录后复制

const container = document.getElementById('text-container');
const img = container.querySelector('img');

img.onload = function() {
  container.style.height = img.height + 'px';
};

登录后复制

演示

以下链接展示了该效果：

您可以参考本篇文章了解更详细的浮动布局实现：

https://segmentfault.com/a/1190000040172089

以上就是如何实现网页两行文字省略并跟随动态块状内容？的详细内容，更多请关注米云其它相关文章！