博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
html/css实现文字自动换行,超出部分出现(...)
阅读量:6137 次
发布时间:2019-06-21

本文共 482 字,大约阅读时间需要 1 分钟。

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;

        }

转载于:https://www.cnblogs.com/Alexin/p/3582240.html

你可能感兴趣的文章
seafile(企业云盘)报错
查看>>
Android之网络数据存储
查看>>
每天学一点Scala之apply方法
查看>>
drbd学习
查看>>
域名服务器
查看>>
ELK部署实战
查看>>
servlet生成随机验证码
查看>>
project server 2007自定义域不能正确显示,报错
查看>>
Emacs编辑器之Python与Perl的IDE环境配置
查看>>
Debian Stretch 安装 Nodejs 最新版本
查看>>
Java循环练习:求1+(1+2)+(1+2+3)+(1+2+3+4)+...(1+2+3+..+10)的和
查看>>
鸟哥:PHP Next: JIT
查看>>
***Java多线程发展简史
查看>>
linux运维必会MySQL企业面试题
查看>>
golang中的类型系统
查看>>
nginx ssL +tomcat实现https
查看>>
java定时器的几种用法[转]
查看>>
centos7 关闭firewall安装iptables并配置
查看>>
远程管理交换机和抓包工具的使用
查看>>
VM增加的内存无法正常显示的解决方法
查看>>