CSS——文本相关属性

目录

文本属性

text-decoration——文本样式修饰

text-indent——文本缩进

text-align——文本对齐方式

text-transform——字母效果

text-overflow——文本超出隐藏方式

总结

---

文本属性

text-decoration——文本样式修饰

• text-decoration：underline；//下划线；
• text-decoration：line-through;//中划线；
• text-decoration：overline；//上划线；
• text-decoration:none;//取消下划线；

text-indent——文本缩进

2em;//表示缩进两个字符；（想要缩进几个字符就写成几em)

text-align——文本对齐方式

• 属性值 justify ——两端对齐
• text-align:justify;//多行文本对齐，不会对单行文本和最后一行文本对齐；
• text-align-last:justify;//单行文本对齐；

text-transform——字母效果

text-transform:capitalize;//英文文本的每个单词的首字母大写；
text-transform:uppercase;//英文文本的每个单词大写；
text-transform:lowercase;//英文文本的每个单词小写；

text-overflow——文本超出隐藏方式

单行文本溢出隐藏显示省略号：

text-overflow 属性指定当文本溢出包含它的元素时，应该如何显示。可以设置溢出后，文本被剪切、显示省略号 (...) 或显示自定义字符串（不是所有浏览器都支持）。

text-overflow 需要配合以下两个属性使用：

• white-space: nowrap;
• overflow: hidden;

white-space:nowrap;//规定段落中的文本不进行换行：
overflow:hidden;//溢出隐藏
text-overflow:ellipsis;//文本设置溢出隐藏后，显示省略号；
   

多行文本溢出隐藏显示省略号： 

 div>div:last-child {
            width: 80px;
        }
        
        p {
            -webkit-box-orient: vertical;//指定一个box子元素是否应按水平或垂直排列。
            -webkit-line-clamp: 1;//文本显示的行数；
            display: -webkit-box;//可使其子代排列在同一水平上,类似display:inline-block;
            border: 1px solid red;
            overflow: hidden;
            text-overflow: ellipsis;
        }

---

总结

文本的隐藏方式在页面中会经常用到，可以收藏以备以后使用。