php 文本数不自动换行,解决留言板中文自动换行,纯数字或英文字母不换行问题...

在前端开发中,遇到多行文字限制显示并隐藏超出部分时,英文和数字组合不会自动换行,可能导致内容溢出父元素。解决办法是通过CSS样式设置`overflow: hidden`,`text-overflow: ellipsis`和`word-break: break-all`来实现。对于单行文字,可以使用`white-space: nowrap`。此方法确保了内容在限定区域内正确显示,并能显示省略号。
摘要由CSDN通过智能技术生成

PS:这是我在别人博客copy下来的

做前端的我们都会发现这样一个问题,当你控制文字出现多行时,而这多行是有限制的(比如超出部分隐藏不显示),而这多行文字如果全部是数字或者字母抑或是数字和字母的组合时,你会发现这些文字不会自动换行,如果控制的不对,它有可能冲出父元素…

原因是:

英书字母之间如果没有空格,系统以为是一个单词,就不会BUTO换行。汉字就没有这种情况。

一行文字

当有一行文字的时候,如果想让超出部分出现(…),可以这样写:

.wrap{

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

width: 118px;

}

多行文字

当有多行文字的时候,可以这样写:

.wrap{

width:220px;

height: 72px;

overflow: hidden;

text-overflow: ellipsis;

word-break: break-all;

}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值