简单几步，掌握CSS实现文字环绕、省略号代替和展开收起的技巧

2023-01-31 05:41:54

CSS 实现文字环绕效果，打造灵动布局

简介

在网页设计中，文字环绕效果是一种常见且强大的技术，它允许文字围绕图像或其他元素自由流动。这种效果可以极大地增强用户体验，并让您的网页布局更加美观、灵活。本博客将深入探究如何使用 CSS 轻松实现文字环绕效果，并通过实际示例和技巧提升您的网页设计水平。

浮动布局：基础

浮动布局是实现文字环绕效果的基石。通过使用 float 属性，我们可以让元素水平排列，而无需占据垂直空间。下面是实现浮动布局的步骤：

为需要环绕的文字设置 float: left 或 float: right 属性，将其浮动到左侧或右侧。
为环绕元素设置 width 属性，以限制其宽度，防止文字溢出。
为环绕元素设置 margin 或 padding 属性，以调整文字与环绕元素之间的间距。

巧用伪元素：添加省略号

当文字超出环绕元素的边界时，我们可以使用伪元素在文字末尾添加省略号（...）。伪元素是虚拟的 HTML 元素，用于添加样式而不会影响页面结构。以下是如何添加省略号：

为需要添加省略号的元素添加 ::after 伪元素。
为 ::after 伪元素设置 content 属性，将其值设置为省略号（"..."）。
为 ::after 伪元素设置 position 属性为 absolute，使其相对于父元素绝对定位。
为 ::after 伪元素设置 top、left 和 display 属性，以调整其位置和显示方式。

按钮控制：展开/收起功能

为了让用户控制文字内容的展开和收起，我们可以添加一个按钮来触发相应操作。实现步骤如下：

为页面添加一个按钮元素，并为其添加唯一的 ID 或 class 属性。
为按钮元素添加事件侦听器，使其在被点击时触发相应的 JavaScript 函数。
在 JavaScript 函数中，使用 DOM 操作获取需要展开/收起的元素，并对其进行相应的操作。

完整示例

以下是使用 CSS 实现文字环绕效果的完整示例：

/* 浮动布局 */
.wrapper {
  display: flex;
}

.text-wrapper {
  float: left;
  width: 200px;
  margin-right: 10px;
}

.image-wrapper {
  float: right;
  width: 200px;
}

/* 省略号 */
.text-wrapper::after {
  content: "...";
  position: absolute;
  top: 100%;
  left: 0;
  display: none;
}

/* 按钮控制 */
#show-more-btn {
  cursor: pointer;
}

/* JavaScript */
const textWrapper = document.querySelector('.text-wrapper');
const showMoreBtn = document.querySelector('#show-more-btn');

showMoreBtn.addEventListener('click', () => {
  textWrapper.classList.toggle('expanded');
});