博客列表 >解决留言板中文自动换行,纯数字或英文字母不换行问题

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

小满未满的博客
小满未满的博客原创
2017年07月30日 16:39:24893浏览

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;

        }



声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议