文本
水平的文本设置:text-align
可选值:
- left:左侧对齐
- right:右对齐
- center:居中对齐
- justify:两端对齐
垂直的文本设置:vertical-align
可选值:
- baseline:默认值,基线对齐
- top:顶部对齐(子元素与父元素的顶部对齐)
- bottom:底部对齐
- middle:居中对齐
- 也可以直接指定值
如:
vertical-align:10px
当我们放置图片时,文本下方往往会留有空隙,可以通过vertical-align设置来消除底部的空隙。
text-decoration:设置文本修饰
可选值:
- none:默认值,什么都没有
- underline:添加下划线
- line-through:删除线
- overline:上划线
white-space::设置网页如何处理空白
可选值:
- normal:默认值
- nowrap:不换行,一直往后排
- pre:保留空白,写的是什么样,表现出来就是什么样。
例如:
pre示例
设置省略内容用标点符号代替:
css代码:
.box{
width: 200px;
white-space:nowrap;
overflow: hidden;
text-overflow: ellipsis;/*溢出的内容设置为省略号*/
}
html代码
<div class="box">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolor eveniet, eos maxime quo amet laborum accusantium repudiandae quod eaque similique illo eum iure odio! Earum aut alias nostrum iusto eligendi.
</div>
效果;
首先设置宽度,其次设置网页不换行,溢出宽度的部分设置为隐藏,溢出的内容设置为省略号,就可以实现该效果。