html css 不换行 省略,CSS英文字符自动换行,强制不换行,超出显示省略号

在默认情况下,英文字符排列是这样的

7a70e81c368e7736fe97925b18aaa83f.png

多个英文单词默认自动换行,单行字母不自动换行

实例html>

默认

div{

width: 120px;

height: 200px;

border: 2px solid red;

}

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

Let's see if the content here will wrap automatically.

查看效果

强制不换行css添加属性

c593e19e873e1415d541489532d5a1e3.pngwhite-space:nowrap;

实例html>

强制不换行

div{

width: 120px;

height: 200px;

border: 2px solid red;

white-space:nowrap;

}

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

Let's see if the content here will wrap automatically.

查看效果

自动换行word-break:break-all;

f3c1ea11790371c00eb264c8ea28905b.png

实例html>

强制英文单词换行

div{

width: 120px;

height: 200px;

border: 2px solid red;

word-break:break-all;

}

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

Let's see if the content here will wrap automatically.

查看效果

超出显示省略号text-overflow:ellipsis;

overflow:hidden;

f2567d3df4c8ac81783090c7c67f998d.png

实例html>

超出显示省略号

div{

width: 120px;

height: 200px;

border: 2px solid red;

text-overflow:ellipsis;

overflow:hidden;

}

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

查看效果