当前位置:首页 > 前端 > HTML/CSS

CSS自动换行、强制不换行、强制断行、超出显示省略号

HTML/CSS 2019-08-22

  项目在测试过程中,偶尔会被美女测试同事提出bug,“哪里哪里功能文字不换行,布局乱啦,好丑!”。跑过去一看原来是输入了大量的英文和数字导致不换行。虽然现实情况不会有这种需求输入一大堆数字和字母,但还是测出来了,改改终究还是好的。

强制不换行

  1. div {
  2. white-space:nowrap;
  3. }

自动换行

  1. div{
  2. word-wrap: break-word;
  3. word-break: normal;
  4. }

强制英文单词断行

  1. div{
  2. word-break:break-all;
  3. }

超出省略号

  1. div{
  2. overflow:hidden;
  3. white-space:nowrap;
  4. text-overflow:ellipsis;
  5. }
< 上一篇 下一篇 >
湘ICP备15005320号-1 似懂非懂 Powered by doyo. 网站地图
返回顶部