内容文本特殊css-流浪者小站

内容文本特殊css

流浪者发布于2018-05-31 16:13 评论(0) 阅读()

文本样式

内容文本在合适位置换行

//允许单词换行，即单词或者字符串如果太长，也会换行

word-break: break-all;

//不允许单词换行，即单词或者字符串如果太长，整个单词或者字符串不换行，将会跑到盒子外面去

word-wrap: break-word;

重要提示：还有其他一些值，不过此处就写了常用的

单行文本超出省略号

overflow: hidden;

text-overflow:ellipsis;

white-space: nowrap;

重要提示：此方法需要规定宽度，未知宽度的盒子不行(可width:100%;)

多行文本超出省略号

overflow : hidden;

text-overflow: ellipsis;

display: -webkit-box;

-webkit-line-clamp: 2;

-webkit-box-orient: vertical;

word-break:break-all;

重要提示：此方法需要规定宽度，未知宽度的盒子不行(可width:100%;)

文本被选中的背景色和文字颜色

*::-webkit-selection{ background: #35cde8; }

*::-moz-selection{ background: #35cde8; }

*::selection{ background: #35cde8; }

重要提示：可写在初始化css

:lang(*)伪类

//html文本

<p> 学习知识<q lang="no">从现在</q>开始，将走得更远。</p>

//css

q:lang(no){

quotes: " ! " "+ ";

color: red;

}

//显示结果如下

学习知识 !从现在+ 开始，将走得更远。

重要提示：

html中 q标签是表示引号的标签

lang="no";页面文本无语言声明

lang="en";声明页面文本使用的是英语

lang="ch";声明页面文本使用的是中文

css中 quotes属性表示用 ! 和 + 替换前后引号，如果写成quotes:" " " "; 则是前后无符号，若不写此属性，那么q标签中的内容会被引号包围起来。