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

学习知识要善于思考，思考，再思考！今天golang学习网小编就给大家带来《如何实现网页两行文字省略并跟随动态块状内容？ 》，以下内容主要包含等知识点，如果你正在学习或准备学习文章，就都不要错过本文啦~让我们一起来看看吧，能帮助到你就更好了！

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

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

方法

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

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

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

示例代码如下：

<div id="text-container">
  <p>第一行</p>
  <p>第二行</p>
  <img src="icon.png" />
</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://codepen.io/xboxyan/pen/PopWVNX

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

https://segmentfault.com/a/1190000040172089

到这里，我们也就讲完了《如何实现网页两行文字省略并跟随动态块状内容？ 》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！