CSS设置文本折行处理

一般情况

只要定好文字所在容器的宽度文字就会折行,如下面:

想控制一段文本不折行,设置如下的样式:

white-space: nowrap;

word-wrap: normal;

word-break: keep-all;

相反,如果一段文本不能折行了,那么可能是设置了如上的样式,则将样式改为

white-space: normal;

word-wrap: break-word;

word-break: break-all;

含有很长英文情况

 定好文字所在容器的宽度后文字不会折行,效果:

对其设置

white-space: normal;

word-wrap: break-word;

word-break: break-all;

可以实现折行。如下:




要实现文本超出n行后折叠,并添加一个点击展开的功能,你可以使用JavaScript来处理。以下是一种实现方法: HTML部分: ```html <div class="container"> <div class="content">这里是文本内容</div> <button class="expand-btn">展开</button> </div> ``` CSS部分: ```css .container { height: /*固定高度*/; line-height: /*行高*/; overflow: hidden; display: -webkit-box; -webkit-line-clamp: /*n行*/; -webkit-box-orient: vertical; } .expand-btn { display: none; /*默认隐藏展开按钮*/ } ``` JavaScript部分: ```javascript const container = document.querySelector('.container'); const content = document.querySelector('.content'); const expandBtn = document.querySelector('.expand-btn'); // 判断是否需要展开按钮 if (content.offsetHeight > container.offsetHeight) { expandBtn.style.display = 'block'; } // 展开按钮点击事件 expandBtn.addEventListener('click', function() { if (container.classList.contains('expanded')) { container.classList.remove('expanded'); expandBtn.textContent = '展开'; } else { container.classList.add('expanded'); expandBtn.textContent = '收起'; } }); ``` 通过以上代码,当文本内容超出容器的高度时,展开按钮会显示出来。点击展开按钮,切换容器的展开状态,并修改按钮的显示文本。你可以根据需要自定义样式和按钮的文本。记得替换代码中的注释部分为你想要的具体数值和文本内容。希望对你有所帮助!如果还有其他问题,请随时提问。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值