一、文字效果

1. 文本垂直水平居中。（一行和多行）

分两种行内元素：span是div子元素，文本位于span标签内
(1).span{display: inline-block;vertical-align: middle;line-height: height;}
(2).div{display: table-cell;width: 200px;border:1px solid blue;vertical-align: middle;}
块级元素：绝对定位法
#parent {position: relative;}
#child {
position: absolute;
top: 50%;
left: 50%;
height: 30%;
width: 50%;
margin: -15% 0 0 -25%;
}

2. 文本超出显示省略值…

单行文本：
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
多行文本：（适用于WebKit浏览器及移动端）
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

3. 文本换行

标签实现：<br/>,<p>
块级元素多行自动换行，但数字和英文会溢出，解决方案：
word-wrap:break-word ;
word-break:break-all

4. 文本缩进

首行缩进：text-indent:20px;或者

5. 文本两端对齐

css2实现方案：text-align: justify，
但这个属性有个缺点：单行两边不对齐，多行最后一行不对齐，故通过添加伪元素加内容:after{display: inline-block;width: 100%;content: ‘’;}
css3实现方案：justify-content: space-around|space-between

6. 字体阴影效果

text-shadow: 5px 5px 5px #FF0000;
后续持续更新。。。

各种css文字样式效果——多个行内元素居中，三点，缩进，阴影等相关推荐

如何让一个图片和一个文字框居中对齐（如何让两个行内元素居中对齐）
这种对齐方式有两种情况图片和文字框中都是居中的,这样看起来也是一种对齐情况,如图所示解决办法: 文字框设置line-height,然后图片的高度height=文字框line-height,再给图片 ...
【前段开发】行内元素和块级元素总结（HTML CSS）
块级元素 <address> information on author <blockquote> long quotation <button> push but ...
CSS行内元素和块级元素的水平居中，垂直居中，水平垂直居中实现
常用内联元素:a,img,input,lable,select,span,textarea,font 常用的块级元素:div,p,table,form,h1,h2,h3,h4,h5,h6,dl,ol, ...
python 全栈开发，Day48(标准文档流,块级元素和行内元素,浮动,margin的用法,文本属性和字体属性)...
昨日内容回顾高级选择器: 后代选择 : div p 子代选择器 : div>p 并集选择器: div,p 交集选择器: div.active属性选择器: [属性~='属性值'] 伪类选择器 a ...
Web前端技术分享：什么是块元素?什么是行内元素?
什么是块元素?什么是行内元素?想必学习web前端知识的同学们,课上都会有提到这一方面,如果对这个知识点还不是很熟悉,可以看看下面小千整理的内容. 什么是块元素?什么是行内元素? HTML标签语言提供了 ...
html 块内元素下移,html——行内元素、块元素、行内块元素
行内元素:span ,a, ,strong , em, del, ins.特点:在一行上显示:不能直接设置宽高:元素的宽和高就是内容撑开的宽高. 块元素:div,h1-h6,p,ul,li.特 ...
【HTML5-小知识】块元素、行内元素和行内块元素
文章目录前言一.块元素.行内元素和行内块元素是什么? 二.块元素三.行内元素四.行内块元素总结前言 HTML常用标签掌握之后,应当进一步了解元素的三种类型,块元素,行内元素,行内块元素, ...
行内元素和块元素的区别
块元素:不管内容多少,块元素都会在浏览器中独占一行.可设置宽高,如果不设置宽高那么它的宽度是100%(占满父级元素一整行) 缺点:1.相邻元素垂直.相邻外边距会重叠.margin-bottom和mar ...
块元素，行内元素，行内块元素及相互转换
块元素常见级特点: div 块 p 段落 ul li 有序列表 ol li 无序列表 dl dd dt 自定义列表 h1 大标题 h2 副标题 h3 3级标题 h4 4级标题 h ...

各种css文字样式效果——多个行内元素居中，三点，缩进，阴影等

前端基础知识——css样式学习