常用的css :
字体:
font-family:
font-style:normal(正常)|italic(斜体)|oblique(倾斜)
font-weight:normal(正常)|bold(粗体)|bolder(特粗体)|lighter(细体)
文本:
word-spacing:normal | length 词与词之间的距离值,可以是负数
letter-spacing:normal | length 字符之间的距离值,可以是负数
vertical-align:baseline(默认值) sub(上标对齐) super(下标对齐) bottom(行框低端对齐) text-bottom(行内文本低端对齐) top(顶端对齐) middle(居中对齐) 定义文本的垂直对齐方式
text-decoration: none 标准的文本 underline 文本下的一条线 overline 文本上的一条线。line-through 穿过文本下的一条线 blink 闪烁的文本 inherit规定应该从父元素继承
text-indent:length 定义固定的缩进。默认值:0 % 基于父元素宽度的百分比的缩进 inherit 规定应该从父元素继承 text-indent 属性的值。
white-space:normal 默认。空白会被浏览器忽略 pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签 nowrap 文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止 pre-wrap 保留空白符序列,但是正常地进行换行 pre-line 合并空白符序列,但是保留换行符 inherit 规定应该从父元素继承
text-align:left 把文本排列到左边。默认值:由浏览器决定。right 把文本排列到右边。center 把文本排列到中间。justify 实现两端对齐文本效果。inherit 规定应该从父元素继承 text-align 属性的值
text-transform:none 默认。定义带有小写字母和大写字母的标准的文本 capitalize 文本中的每个单词以大写字母开头 uppercase 定义仅有大写字母 lowercase 定义无大写字母,仅有小写字母 inherit 规定应该从父元素继承 text-transform 属性的值。
text-shadow:color 颜色 x-offset x轴位移 y-offset y轴位移 blur-radius模糊半径
IE9+
color:阴影颜色
x-offset: 阴影水平位移量
y-offset:阴影垂直方向偏移量
blur-transform:阴影模糊半径
text-overflow:clip | ellipsis
clip:不显示省略标记,只简单的裁切
ellipsis:文本省略标记(...)
文本换行:
word-wrap : normal | break-word
1、normal为默认值,浏览器只在半角空格或连字符的地方进行换行;
2、break-word将内容在边界内换行(不截断英文单词换行)
word-break:normal | break-all | keep-all
1、normal为默认值,如果设置为默认值时中文则到边界处的汉字换行,如果是英文整个单词换行,如果出现某个单词长度过长,则会撑破容器,如果边框为固定属性,则后面部分将无法显示;
2、break-all:可以强行截断英文单词,达到词内换行效果。
3、keep-all:不允许字断开。如果是中文将把前后标点符号内的一个汉字短语整个换行,英文单词也整个换行,如果出现某个英文字符长度超过边界,则后面的部分将撑破容器,如果边框为固定属性,则后面部分无法显示著作权归作者所有。
省略:
<style>
.shenlv-single{
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
.shenlv-list{
display: -webkit-box;
width: 300px;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; /*行数*/
overflow: hidden;
}
.shenlv-text{
position:relative;
width: 200px;
/*设置容器高度为3倍行高就是显示3行*/
overflow:hidden;
height: 62px;
}
.shenlv-text::after{
content:'...';
position:absolute;
bottom:0;
right:0;
padding:0 2px 1px 7px;
background:#fff;
}
</style>
<script>
var str = "CSS3是CSS(层叠样式表)技术的升级版本,于1999年开始制订,2001年5月23日W3C完成了CSS3的工作草案,主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。";
var substrByNum = function (str,num) {
var bytesCount = 0;
for (var i = 0; i < str.length; i++) {
var bytStr = str.charAt(i);
if (/^[\u0000-\u00ff]$/.test(bytStr)) {
bytesCount += 1;
} else {
bytesCount += 2;
}
if (bytesCount > num) {
return str.substr(0, i) + '...'
} else if (bytesCount === num) {
return str.substr(0, i + 1) + '...'
}
}
return str
}
console.log(substrByNum(str,20));
</script>
<body>
<h3>单行文本</h3>
<div class="shenlv-single">
CSS3是CSS(层叠样式表)技术的升级版本,于1999年开始制订,2001年5月23日W3C完成了CSS3的工作草案,主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。
</div>
<h3>多行文本</h3>
<div class="shenlv-list">
CSS3是CSS(层叠样式表)技术的升级版本,于1999年开始制订,2001年5月23日W3C完成了CSS3的工作草案,主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。
</div>
<h3>兼容性省略</h3>
<div class="shenlv-text">
CSS3是CSS(层叠样式表)技术的升级版本,于1999年开始制订,2001年5月23日W3C完成了CSS3的工作草案,主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。
</div>
</body>