CSS实现文本溢出处理

1.单行文本溢出

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}.container {width: 300px;margin: 50px auto;padding: 0 10px;/* 两端对齐 */text-align: justify;line-height: 30px;border: 1px solid #000;/* --------- 单行文本溢出处理 ----------- *//* 不换行 */white-space: nowrap;/* 隐藏超出部分 */overflow: hidden;/* 未显示部分用省略号代替 */text-overflow: ellipsis;}</style>
</head><body><div class="container">Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique, doloribus? Ratione laboreiure, minima voluptatem dolore possimus soluta ea minus tempore animi officia accusantium nulla, maiores,delectus vero debitis recusandae.</div>
</body></html>

在这里插入图片描述

2.多行文本溢出处理

2-1.方法一：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}.container {width: 300px;margin: 50px auto;padding: 0 10px;/* 两端对齐 */text-align: justify;line-height: 30px;border: 1px solid #000;/* --------- 多行文本处理 -------- *//* 盒子类型 */display: -webkit-box;/* 盒子排列方向---垂直 */-webkit-box-orient: vertical;/* 显示文字的行数---末尾自动加省略号 */-webkit-line-clamp: 5;/* 超出部分隐藏 */overflow: hidden;}</style>
</head><body><div class="container">Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique, doloribus? Ratione laboreiure, minima voluptatem dolore possimus soluta ea minus tempore animi officia accusantium nulla, maiores,delectus vero debitis recusandae.</div>
</body></html>

在这里插入图片描述

2-2.方法二

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}.container {width: 300px;height: 150px;margin: 50px auto;padding: 0 10px;/* 两端对齐 */text-align: justify;line-height: 30px;border: 1px solid #000;/* 超出部分隐藏 */overflow: hidden;}.container::before {content: '';width: 100%;height: 120px;display: block;}.ellipsis {float: right;}.text {margin-top: -120px;}</style>
</head><body><div class="container"><div class="ellipsis">...</div><p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique, doloribus? Ratione laboreiure, minima voluptatem dolore possimus soluta ea minus tempore animi officia accusantium nulla, maiores,delectus vero debitis recusandae.</p></div>
</body></html>