CSS文字排版
一、CSS文字换行;二、文字不换行,超出部分显示省略号、三、文字两端对齐或文字在容器中平均分布;四、文字竖排显示
一、CSS文字换行
1.字母换行:
word-wrap: break-word;
2.单词换行:
word-break: break-all;
3.文字换行:
white-space:pre-wrap;
二、CSS文字不换行,超出部分显示省略号(...)
1.单行文本
overflow: hidden; /* 文字长度超出限定宽度,则隐藏超出的内容 */
white-space: nowrap; /* 设置文字在一行显示,不能换行 */
text-overflow: ellipsis; /* 规定当文本溢出时,显示省略符号来代表被修剪的文本 */
2.多行文本
/* 类似flex纵向布局 */
display: -webkit-box;
-webkit-box-orient: vertical;
/* 盒子高度取(2)行,并自带省略号 */
-webkit-line-clamp:2;
overflow :hidden;
注:
- -webkit-line-clamp是webkit的私有属性,是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中。
- -webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他的WebKit属性。常见结合属性:
- display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
- -webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。
- -webkit-line-clamp属性支持的浏览器如下所示:
- 谷歌浏览器
- 火狐浏览器
- 苹果浏览器
- Opera
三、CSS文字两端对齐或文字在容器中平均分布
1.多行文本时
text-align: justify;
案例:
<style>
p{
width: 100px;
background-color: #ccc;
}
.p1{
text-align: justify;
}
</style>
<p>空空空</p>
<p>空空空空空空空空空</p>
<p class="p1">
空空空空空空空空空
</p>
注:只有一行显示的时候这个属性是不起作用的。(使用了 word-break:dbreak-all这种强制换行的属性, 也是不起作用的)
2.只有一行文本时
text-align-last: justify;
案例:
<style>
p{
width: 100px;
background-color: #ccc;
text-align-last: justify;
}
</style>
<p>空空空</p>
<p>空空空空</p>
<p>空空空空空空空空</p>
注:兼容性不好, 谷歌运行可以, 火狐、IE和safari浏览器没有效果且ios系统也不兼容。
/* ie写法 */
text-align: justify;
text-justify: inter-ideograph;
兼容iOS与IE
案例1:利用占位标签(我一般用p标签或i标签)。
<style>
div{
width: 200px;
margin: 10px;
background-color: #ccc;
height: 25px;
line-height: 25px;
text-align: justify;
}
div p{
display: inline-block;
width:100%;
}
</style>
<div>空空空空<p></p></div>
<div>空空空空空<p></p></div>
<div>空空空<p></p></div>
案例2: 通过伪类after的方式,但但但是ie7及以下不支持伪类, 不能用该方法。
<style>
div{
width: 200px;
margin: 10px;
background-color: #ccc;
height: 25px;
line-height: 25px;
text-align: justify;
}
div:after{
content:'';
display:inline-block;
width:100%; /* 或者padding-left:100%; */
}
</style>
<div>空空空空</div>
<div>空空空空空</div>
<div>空空空</div>
四、文字竖排显示
writing-mode: vertical-lr | vertical-rl;
- vertical-lr:在盒子左边竖排显示
- vertical-rl:在盒子右边竖排显示
text-orientation: upright | mixed;
- upright:将水平书写的字符自然布局(直排)
- mixed:顺时针旋转水平书写的字符 90°,将垂直书写的文字自然布局
案例1:文字竖排显示
<style>
.mode{
width: 200px;
writing-mode: vertical-rl;
}
</style>
<p class="mode">空空空</p>
案例2:文字竖排显示 ,居中,均匀分布
<style>
.mode{
width: 200px;
height: 200px;
background-color: #eee;
writing-mode: vertical-rl;
text-orientation: upright;
text-align-last: justify;
/* 垂直居中,记得将下面伪类注释掉 */
/* display: flex;
justify-content: center;
align-items: center; */
}
.mode:before,:after{
content:'';
display:inline-block;
width:100%;
}
</style>
<p class="mode">空空空</p>
更多推荐
所有评论(0)