CSS⽂字超出宽度---换⾏总结2021-5-5重新总结—CSS⽂字超出宽度—附代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"content="width=device-width, initial-scale=1.0"> <title>Document</title>
<style>
<style>
body{
padding: 20px;
}
.parent{
width: 100px;
}
.child1{
background-color: #a1cef5;
line-height: 30px;
padding: 20px;
}
.bgc_blue{
background-color: #a1cef5;
}
.bgc_purple{
background-color: #dca1f5;
}
.my_usually{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.my_usually1{
white-space: nowrap;
overflow: hidden;
}
/
* 强制不换⾏ */
.nowrap{
white-space: nowrap;
}
/* 允许单词内断句，⾸先会尝试挪到下⼀⾏，看看下⼀⾏的宽度够不够，不够的话就进⾏单词内的断句 */ .breakword{
word-wrap: break-word;
}
/* 断句时，不会把长单词挪到下⼀⾏，⽽是直接进⾏单词内的断句 */
.breakAll{
word-break: break-all;
}
/* 超出部分显⽰省略号 */
.ellipsis{
text-overflow: ellipsis;
overflow: hidden;
}
</style>
</head>
<body>
<h1>使⽤样式控制字体换⾏下</h1>
<div class="my_usually"></div>
<div class="parent">
<h2 class="nowrap">第1种：white-space: nowrap; overflow: hidden; text-overflow: ellipsis;</h2>
<p class="my_usually bgc_blue">white-space: nowrap; ---overflow: hidden; text-overflow: ellipsis;</p>
<h2 class="nowrap">第2种：white-space: nowrap; overflow: hidden; </h2>
<p class="my_usually1 bgc_blue">white-space: nowrap; ---overflow: hidden; </p>
<h2 class="nowrap">第3种：white-space: nowrap; </h2>
<p class="nowrap bgc_purple">white-space: nowrap;----absavhsafhuafdfbjhfvsalguvfaihuivfs</p>
<h2 class="nowrap">第4种：word-wrap: break-word; </h2>
<p class="breakword bgc_blue">word-wrap: break-word;----absavhsafhuafdfbjhfvsalguvfaihui</p>
<h2 class="nowrap">第5种：word-break: break-all; </h2>
<p class="breakAll bgc_purple">word-break: break-all;----absavhsafhuafdfbjhfvsalguvfaihuivf</p>
<h2 class="nowrap">第6种：wordwrap:breakword; </h2>
html span 居中
<p class="normal bgc_blue">wordwrap:breakword;----absavhsafhuafdfbjhfvsalguvfaihuivfsa</p>
<h2 class="nowrap">第7种：text-overflow: ellipsis; overflow: hidden; </h2>
<p class="ellipsis bgc_purple">text-overflow: ellipsis; overflow:
hidden;----absavhsafhuafdfbjhfvsalguvfaihuivfsab</p>
</div>
<h1 class="my_h1">⾮使⽤样式控制字体换⾏下</h1>
<div class="parent">
<h3>汉字⽂字</h3>
<div class="child1">普通情况普通情况下普通情况下普通情况下普通情况下普通情况下下</div>
<h3>纯数字</h3>
<div class="child1">2222222222222222222222222222222222222222</div>
<h3>数字加⽂字加其他</h3>
<div class="child1">33333333333333333333普通情况3333333普通情况333333333333333333333333333333</div>
<h3>特殊符号加⽂字加其他</h3>
<div class="child1">————————————______普通情况3333333普通情况333333333333333333333333333333</div> </div>
</body>
</html>
多⾏⽂字⾃动换⾏居中–实测好⽤的很OK
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.outDiv{
border: 1px solid black;
width: 200px;
height: 200px;
text-align: center;
overflow: hidden;
}
.outDiv .innerDiv1{
display: inline-block;
vertical-align: middle;
}
.outDiv .innerDiv-fix{
display: inline-block;
width: 0;
height: 100%;
line-height: 100%;
vertical-align: middle;
visibility: hidden;
}
</style>
</head>
<body>
<div class="outDiv">
<span class="innerDiv1">多⾏⽂字⾃动多⾏⽂字⾃动换⾏居中多⾏⽂字⾃动换⾏居中多⾏⽂字⾃动换⾏居中多⾏⽂字⾃动换⾏居中换⾏居中</span><span c lass="innerDiv-fix"><!-- 此标签不能换⾏ --></span>
</div>
</body>
</html>
2021-5-5之前总结

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。