css自動換行怎麼設置?H5代碼:<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
p{
width: 200px;
background-color: #aaa;
}
.p1{
white-space: nowrap;
}
.p2{
word-wrap: break-word;
}
.p3{
word-break: break-all;
}
.p4{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<p class="p1">comrem dfgdsgfd sdffafsdafa dsfaf sdfsaf thgwer awdafqew</p>
<p class="p2">ljj ljljoi hsgfa tgregv dsgrewg ygvsg werfwgr rweg vcdgss</p>
<p class="p3">comrem dfgdsgfd sdffafsdafa dsfaf sdfsaf thgwer awdafqew</p>
<p class="p4">comrem dfgdsgfd sdffafsdafa dsfaf sdfsaf thgwer awdafqew dgadsfs</p>
</body>
</html>
,我來為大家講解一下關于css自動換行怎麼設置?跟着小編一起來看一看吧!
H5代碼:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
p{
width: 200px;
background-color: #aaa;
}
.p1{
white-space: nowrap;
}
.p2{
word-wrap: break-word;
}
.p3{
word-break: break-all;
}
.p4{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<p class="p1">comrem dfgdsgfd sdffafsdafa dsfaf sdfsaf thgwer awdafqew</p>
<p class="p2">ljj ljljoi hsgfa tgregv dsgrewg ygvsg werfwgr rweg vcdgss</p>
<p class="p3">comrem dfgdsgfd sdffafsdafa dsfaf sdfsaf thgwer awdafqew</p>
<p class="p4">comrem dfgdsgfd sdffafsdafa dsfaf sdfsaf thgwer awdafqew dgadsfs</p>
</body>
</html>
屬性:
p{ white-space: nowrap;}
2、自動換行:word-wrap屬性用來标明是否允許浏覽器在單詞内進行斷句,這是為了防止當一個字符串太長而找不到它的自然斷句點時産生溢出現象;
屬性:
p{ word-wrap: break-word;}
3、強制斷行:word-break 屬性用來标明怎麼樣進行單詞内的斷句;
屬性:
p{ word-break: break-all;}
4、溢出顯示省略号:ext-overflow CSS 屬性确定如何向用戶發出未顯示的溢出内容信号。它可以被剪切,顯示一個省略号(’…’,U 2026 HORIZONTAL ELLIPSIS)或顯示一個自定義字符串;
p{ overflow: hidden; text-overflow: ellipsis;}
更多精彩资讯请关注tft每日頭條,我们将持续为您更新最新资讯!