如何理解和应用CSS中的浮动元素定位，利用纯 CSS 实现多行文本省略的技巧-Toy模板网

在网页设计中，经常会遇到需要显示多行文本内容但又不希望占用过多空间的情况。为了优化用户体验和页面布局，我们可以使用纯 CSS 技巧来实现多行文本省略。

本文将介绍几种常见的方法，帮助你轻松实现这一效果。

示例一：利用纯 CSS 实现多行文本省略的技巧

1. 使用 `text-overflow: ellipsis` 属性

`text-overflow: ellipsis` 是一个常用的 CSS 属性，它可以在文本溢出容器时显示省略号。结合其他样式属性，我们可以实现多行文本的省略效果。

以下是一个示例代码，展示如何使用 `text-overflow: ellipsis` 实现多行文本省略：

.text {
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 显示三行文本 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

在上述代码中，我们将 `.text` 元素设置为一个 Flex 容器，并通过 `-webkit-line-clamp` 属性限制了文本的行数为 3 行。当文本超出 3 行时，将显示省略号。

2. 结合伪元素进行更精细的控制

如果你希望在省略号之前添加额外的提示符号或者更改省略号的样式，可以使用伪元素来实现。

以下是一个示例代码，展示如何结合伪元素进行更精细的多行文本省略控制：

.text {
  position: relative;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 显示三行文本 */
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.text::after {
  content: "..."; /* 省略号 */
  position: absolute;
  bottom: 0;
  right: 0;
  padding-left: 2px; /* 可调整间距 */
  background-color: #fff; /* 可调整背景颜色 */
}

在上述代码中，我们通过给 `.text` 元素设置 `position: relative`，为 `.text::after` 伪元素添加省略号，并通过调整 `padding-left` 属性和 `background-color` 属性来自定义省略号的样式。

3. 使用 JavaScript 库

除了纯 CSS 的方法外，还可以借助一些 JavaScript 库来实现多行文本省略。例如，`line-clamp.js`、`clamp.js` 或 `dotdotdot.js` 等库提供了更多的定制选项和动态调整功能，适用于各种场景。

请注意，使用 JavaScript 库可能会增加页面加载时间和对第三方库的依赖，所以在决定使用时请权衡利弊。

示例二：纯 CSS 实现多行文本

Html代码

<div class="wrapper">
  <input id="exp1" class="exp" type="checkbox">
  <div class="text">
    <label class="btn" for="exp1"></label>
    浮动元素是如何定位的
    正如我们前面提到的那样，当一个元素浮动之后，它会被移出正常的文档流，然后向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。
    在下面的图片中，有三个红色的正方形。其中有两个向左浮动，一个向右浮动。要注意到第二个向左浮动的正方形被放在第一个向左浮动的正方形的右边。如果还有更多的正方形这样浮动，它们会继续向右堆放，直到填满容器一整行，之后换行至下一行。
  </div>
</div>

<div class="wrapper">
  <input id="exp2" class="exp" type="checkbox">
  <div class="text">
    <label class="btn" for="exp2"></label>
    浮动元素是如何定位的
    正如我们前面提到的那样，当一个元素浮动之后，它会被移出正常的文档流，然后向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。
  </div>
</div>

CSS代码

.wrapper {
    display: flex;
    margin: 50px auto;
    width: 800px;
    overflow: hidden;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 20px 20px 60px #bebebe,
    -20px -20px 60px #ffffff;
  }
 
  .text {
    font-size: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: justify;
    position: relative;
    line-height: 1.5;
    max-height: 4.5em;
    transition: .3s max-height;
  }
 
  .text::before {
    content: '';
    height: calc(100% - 26px);
    float: right;
  }
 
  .text::after {
    content: '';
    width: 999vw;
    height: 999vw;
    position: absolute;
    box-shadow: inset calc(100px - 999vw) calc(30px - 999vw) 0 0 #e5eff8;
    margin-left: -100px;
  }
 
  .btn {
    position: relative;
    float: right;
    clear: both;
    margin-left: 20px;
    font-size: 16px;
    padding: 0 8px;
    background: #3F51B5;
    line-height: 24px;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
  }
 
  .btn::after {
    content: '展开'
  }
 
  .exp {
    display: none;
  }
 
  .exp:checked + .text {
    max-height: 200px;
  }
 
  .exp:checked + .text::after {
    visibility: hidden;
  }
 
  .exp:checked + .text .btn::before {
    visibility: hidden;
  }
 
  .exp:checked + .text .btn::after {
    content: '收起'
  }
 
  .btn::before {
    content: '...';
    position: absolute;
    left: -5px;
    color: #333;
    transform: translateX(-100%)
  }