Blogger Information
Blog 5
fans 0
comment 0
visits 4901
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
解决留言板中文自动换行,纯数字或英文字母不换行问题
小满未满的博客
Original
894 people have browsed it

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;

        }



Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!