今天需求出现了一个与正常的超出行数隐藏并使用...展示不一样的地方。
一般来说正常的超出省略使用CSS就能解决
<p class="ellipsis">这是一段很长的文本,当它超过一行时将被隐藏并显示省略号。</p>
超出一行:
css .ellipsis { display: inline-block; /* 设置为内联块级元素 */ overflow: hidden; /* 隐藏溢出的内容 */ text-overflow: ellipsis; /* 显示省略号 */ white-space: nowrap; /* 不换行 */ max-width: 100%; /* 最大宽度不超过父容器 */ }
超出行数自定义
.ellipsis { display: -webkit-box; /* 设置为块级元素 */ -webkit-line-clamp: 2; /* 控制显示的行数 */ -webkit-box-orient: vertical; /* 设置为垂直方向布局 */ overflow: hidden; /* 隐藏溢出的内容 */ text-overflow: ellipsis; /* 显示省略号 */ white-space: normal; /* 换行 */ }
我想了很多办法,我们在最后一行想加个按钮使用css是不行的,解决就只能使用最原始的、最