常规css处理方法：

控制文字行数：

// 多行显示
.text_morerow {
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2; // 控制显示行数
-webkit-box-orient: vertical;
word-break: break-all;
}

如果仅仅这么设置，效果是这样：

但是我们还有一个查看更多的按钮来控制内容显隐，要如何实现呢，现在我们有一种新思路，

html部分：

<div class="text-spread-container">
    <div class="text">我是一大段文字文字我是一大段文字文字我是一大段文字文字我是一大段文字文字我是一大段文字文字我是一大段文字文字我是一大段文字文字我是一大段文字文字我是一大段文字文字我是一大段文字文字</div>
    <div class="btn">...查看更多</div>
 父元素固定容器：
 
.text-spread-container {
 
position: relative;
 
overflow: hidden;
 
max-height:100px;
 
子元素文字容器：
 
.text{
 
color: #1f1f1f;
 
line-height: 0.22rem;
 
查看更多按钮CSS:
 
.btn {
 
position: absolute;
 
right: 0;
 
bottom: 0;
 
cursor: pointer;
 
background-color: #fff;
 
利用伪类视觉看起来有渐变淡出效果
 
.btn:before {
 
position: absolute;
 
right: 100%;
 
content: "";
 
width:0.16rem;
 
height:0.22rem;
 
background-image: linear-gradient(270deg,#fff,hsla(0,0%,100%,0));
 
我们可以通过判断.text元素的高度 是否大于父元素的max-height 100px 来控制查看更多按钮的显隐，当点击查看更多切换时，父元素高度改为和子元素通高，或者去除/添加overflow-hidden属性即可。
                    我们可以通过判断.text元素的高度 是否大于父元素的max-height 100px 来控制查看更多按钮的显隐，当点击查看更多切换时，父元素高度改为和子元素通高，或者去除/添加overflow-hidden属性即可。但是我们还有一个查看更多的按钮来控制内容显隐，要如何实现呢，现在我们有一种新思路，-webkit-line-clamp: 2;如图：第三行文末需要展示省略号，并且有查看更多按钮，切换显示隐藏。利用伪类视觉看起来有渐变淡出效果。
展示两行，用的css属性：  display:-webkit-box;-webkit-box-orient:vertical;  -webkit-line-clamp:2;
	利用clientHeight和scrollHeight的特性比较，来判断内容是否溢出
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
				
一般情况下像下图这样需要缩进的，一般都会外面一个div里面两块需要两个div然后用定位或者flex、table、浮动后设置宽度等来实现
已知宽度的情况下上面列的方法都适用
不知宽度的情况下可以用flex、table等来实现
<div class="main">
    <div class="list">八卦：八卦，见于《周易·系辞下》云：“古者包牺氏之王天下也，仰则观象于天，俯则观法于地；观鸟兽之文与地之宜；近取诸身，远取诸物，于是始作八卦，以通神明之德，以类万物之情。” [1]
				
我们知道css中text-indent属性可以使每个段落首行开头文字缩进，如缩进2个文字距离样式。
p{　　text-indent: 2em; /*em是相对单位*/
注：em是相对长度单位。相对于当前对象内文本的字体尺寸。我们中文段落一般每段前空两个汉字。实际上，就是首行缩进了2em。
那如果我们想让第二行缩进一格呢：
　　text-indent: -2em;
　　margi...
				
CSS段落间距调整 P标签段落上下距离如何设置
https://blog.csdn.net/lin74love/article/details/62883243
CSS中margin和padding的上下左右
https://blog.csdn.net/s464036801/article/details/8085543
				
可以使用 CSS3 中的 transform 属性和 transition 属性来实现点击扇形展开效果。
首先，需要将扇形的 HTML 结构设置为一个 div 容器和多个子元素，每个子元素代表一个扇形。容器需要设置为圆形，并将所有子元素都设置为绝对定位，位置重合在圆心上。
然后，通过设置每个扇形的 transform 属性，将其旋转到对应的位置。需要注意的是，每个扇形应该以圆心为中心旋转，角度根据扇形数量平均分配。
最后，通过设置容器的 transform 属性，在点击扇形时将其展开。可以使用 transition 属性来实现平滑的动画效果。
以下是一个示例代码：
.container {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: gray;
.item {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50px;
  height: 50px;
  margin-top: -25px;
  margin-left: -25px;
  transform-origin: 0% 0%;
  transition: transform 0.2s;
.item:nth-child(1) {
  transform: rotate(0deg) translate(100px) rotate(-90deg);
.item:nth-child(2) {
  transform: rotate(45deg) translate(100px) rotate(-45deg);
.item:nth-child(3) {
  transform: rotate(90deg) translate(100px) rotate(0deg);
.item:nth-child(4) {
  transform: rotate(135deg) translate(100px) rotate(45deg);
.item:nth-child(5) {
  transform: rotate(180deg) translate(100px) rotate(90deg);
.item:nth-child(6) {
  transform: rotate(225deg) translate(100px) rotate(135deg);
.item:nth-child(7) {
  transform: rotate(270deg) translate(100px) rotate(180deg);
.item:nth-child(8) {
  transform: rotate(315deg) translate(100px) rotate(225deg);
.item:hover {
  transform: scale(1.2);
.container:hover .item {
  transform: translate(-50%, -50%) scale(1.2);
在 HTML 中，扇形的容器和子元素可以这样定义：
<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
在 CSS 中，需要定义每个子元素的 transform 属性，以及容器的 transform 属性和 transition 属性。当鼠标悬停在子元素上时，可以通过设置其 transform 属性来实现放大效果；当鼠标悬停在容器上时，可以通过设置所有子元素的 transform 属性来实现展开效果。
                    CSDN-Ada助手: 
                    恭喜您写出了关于element-ui多选框回显问题的博客，非常实用，让我们对这个问题有了更深入的了解。接下来，希望您能够继续分享相关的技术知识和经验，让更多的人受益。可能您可以考虑写一些关于element-ui其他组件的使用心得，或者是与其他前端框架的比较等等。期待您的下一篇博客！
CSDN 会根据你创作的前四篇博客的质量，给予优秀的博主博客红包奖励。请关注 https://bbs.csdn.net/forums/csdnnews?typeId=116148&utm_source=csdn_ai_ada_blog_reply4 看奖励名单。
                CSS处理文字段落尾行行末缩进，点击查看更多展开效果
                    数学分析分析什么？: 
                    恭喜您又写了一篇优秀的博客，标题看起来非常吸引人。不仅能够使用CSS，还能够行末缩进，这让我相信您在前端开发方面已经非常熟练了。希望您能够继续创作更多优秀的博客，让我们从您的文章中学到更多的知识和技巧。同时，建议您可以尝试探索一些新的前端技术或者深入研究一些已有的技术，这样能够更好地提升自己的技能水平，也会为您的博客带来更多的阅读量和关注度。
                vue BMapGL创建可绘制折线区域百度地图
                    CSDN-Ada助手: 
                    恭喜您又写了一篇优秀的博客，标题看起来非常吸引人。不仅能够使用Vue和BMapGL，还能够在地图上绘制折线区域，这让我相信您在前端开发方面已经非常熟练了。希望您能够继续创作更多优秀的博客，让我们从您的文章中学到更多的知识和技巧。同时，建议您可以尝试探索一些新的前端技术或者深入研究一些已有的技术，这样能够更好地提升自己的技能水平，也会为您的博客带来更多的阅读量和关注度。
CSDN 正在通过评论红包奖励优秀博客，请看红包流：https://bbs.csdn.net/?type=4&header=0&utm_source=csdn_ai_ada_blog_reply3，我们会奖励持续创作和学习的博主，请看：https://bbs.csdn.net/forums/csdnnews?typeId=116148&utm_source=csdn_ai_ada_blog_reply3
                CSS处理文字段落尾行行末缩进，点击查看更多展开效果
                    xiaokar的日常cv: 
                    验证了，有点奇葩，会有文字遮挡一半的问题