多文本溢出(子定父相/旧版本弹性盒子)CSS_使用父相子绝为什么会左溢出-优快云博客

本文链接：https://blog.youkuaiyun.com/Tian_std_scu/article/details/138221108

1.子定父相

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>文本溢出省略号</title>
  <!-- <style>
    .container {
      overflow: hidden; /* 溢出隐藏 */
      position: relative; /* 子绝父相，这里是为了给伪元素设置定位*/   
      text-align: justify; /* 设置文本对齐方式为两端对齐，这样在伪元素内容遮盖末尾文字时才能对齐，即使部分文本被隐藏在容器内，剩下的文本也会保持两端对齐的效果，而不会导致断行或不规整的显示。*/
      width: 300px;
      height: 100px;
      border: 1px solid #ccc;
      line-height: 20px; /* 设置行高与容器高度成倍数关系，这样避免文本溢出时，文字显示一半 */
    }
    .container::after {
      position: absolute; /* position: absolute; 定位伪元素，并通过 right: 0; bottom: 0; 设置其位置在文本的右下角。 */
      width: 1em; /* 设置伪元素的宽度，以遮盖末尾的一个字的大小 */
      right: 0;
      bottom: 0;
      content: "...";
      background-color: pink;
    }
  </style> -->
  <style>
    .container {
      overflow: hidden;
      position: relative;
      width: 300px;
      height: 100px;
      text-align: justify; 
      line-height: 20px;
      border: 1px solid black;
    }
    .container::after{
      position: absolute;
      right: 0;
      bottom: 0;
      content: '...';
      background-color: brown;
    }

  </style>
</head>
<body>
  <div class="container">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id erat vel ex facilisis iaculis.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id erat vel ex facilisis iaculis.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id erat vel ex facilisis iaculis.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id erat vel ex facilisis iaculis.
  </div>
</body>
</html>

2.旧版本弹性盒子

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <!-- 它将使用指定的兼容性模式来渲染页面，而不考虑浏览器本身的默认行为或版本。这有助于确保页面在较新版本的 IE 浏览器中以最佳方式显示。 -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!-- content="width=device-width, initial-scale=1.0" 是 <meta> 元素的属性值，它指定了视口的属性。
    width=device-width 表示视口的宽度应该等于设备的宽度。这样可以确保网页在移动设备上以正确的宽度显示，不会出现缩放或横向滚动条。
    initial-scale=1.0 表示初始缩放比例为 1.0。这样可以确保网页在加载时以实际尺寸显示，不会自动缩放或放大。 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>文本溢出省略号_旧版弹性盒子</title>
  <!-- <style>
     /* 利用旧版弹性盒子 */
      /* 
        多行文本溢出隐藏显示省略号方法二：
        兼容性写法,因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端
      */
      .box{
        overflow: hidden;
        display: -webkit-box;
        height: 100px;
        /* 旧版本弹性盒子 */
         /* 弹性盒子元素垂直排列 */
         -webkit-box-orient: vertical;
         /* -webkit-box-orient: vertical; */
        width: 200px;
        line-height: 20px;
        /* 控制要显示的行数 */
        line-clamp: 3;
        /* text-align: justify; */
        background-color: pink;

      }
  </style> -->
  <style>
    .box{
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      line-height: 20px;
      width: 300px;
      height: 100px;
      line-clamp: 3; /* 3行 */
      background-color: pink;
    }
  </style>
</head>
<body>
  <div class="box">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id erat vel ex facilisis iaculis.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id erat vel ex facilisis iaculis.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id erat vel ex facilisis iaculis.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id erat vel ex facilisis iaculis.
  </div>
</body>
</html>