CSS 文字样式,换行,省略

常用的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>

这里写图片描述