css文本属性

Tony_Zby 发布于2019-08-30 15:53 / 749人阅读

摘要：的区别指字母间距，对英文和汉字，空格都有效，也可以叫字符间距。指单词间距，对汉字不支持。时的效果压缩空白和换行符，排满不换行。纵向长度，可为负值，向下为正。阴影的模糊长度。的使用有了文字描边，就有文字填充色。

1. letter-spacing,word-spacing,white-space的区别

letter-spacing指字母间距，对英文和汉字，空格都有效，也可以叫字符间距。

word-spacing指单词间距，对汉字不支持。

white-space指空白和换行的处理。有以下几个值

序号	名称	说明
1	normal	压缩空白和换行符，排满时换行
2	nowrap	压缩空白和换行符，排满也不换行
3	pre	不压缩空白和换行符，排满不换行
4	pre-line	不压缩空白和换行符，排满不换行
5	pre-wrap	不压缩空白和换行符，排满换行

hello world hello you hello me hello !!! hello world hello you hello me hello !!! hello world hello you hello me hello !!! hello world hello you hello me hello !!!

normal时的效果：压缩空白和换行符，排满换行。

nowrap时的效果：压缩空白和换行符，排满不换行。

pre时的效果：不压缩空白和换行符，排满不换行。

pre-line时的效果：压缩空白，不压缩换行符，排满换行。

pre-wrap时的效果：不压缩空白和换行符，排满换行。

2. word-break,word-wrap的区别

word-wrap处理单词内是否换行。word-break处理单词是否换行。

hello world aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

默认情况：

word-wrap: break-word;时

word-break: break-all;时：

3. text-overflow的使用

单行时：

p{
    border: 1px solid red;
    width: 100px;
    height: 20px;
    line-height: 20px;
    text-align: center;

    text-overflow: ellipsis;/*重点1*/
    overflow: hidden;/*重点2*/
    white-space: nowrap;/*重点3*/
}

多行时：只支持webkit的浏览器，火狐和ie都不支持。

p.muti{
    width: 200px;
    border: 1px solid red;

    text-overflow: ellipsis;
    overflow: hidden; 

    display: -webkit-box; /**对象作为伸缩盒子模型显示 **/
    -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
    -webkit-line-clamp: 2; /** 显示的行数 **/
}

4. text-shadow的使用

text-shadow: 3px 2px 1px gray;

3px:横向长度，可为负值，向右为正。
2px:纵向长度，可为负值，向下为正。
1px:阴影的模糊长度。
gray:阴影颜色。

可叠加，代码如下：

text-shadow: 1px 3px 1px gray,2px 3px 1px red,3px 3px 1px maroon;

效果：

5. text-stroke的使用

text-stroke由text-stroke-color和text-stroke-width组成。下面是简写形式：

-webkit-text-stroke: 1px red;

效果：

目前支持情况不太乐观

查看支持情况的网址：caniuse.com

使用text-shadow也可以实现描边效果：

h1.shadow{text-shadow:-0.025em -0.025em 0 #f00,
        0.025em -0.025em 0 #f00,
        -0.025em 0.025em 0 #f00,
        0.025em 0.025em 0 #f00;}

原理是在文字的上下左右加阴影。

6. text-fill-color的使用

有了文字描边，就有文字填充色。和text-stroke配合使用，支持情况也一样。

 h1.stroke{
    color: black; /*不起作用*/
    -webkit-text-stroke: 1px red;
    -webkit-text-fill-color:transparent;
}

效果：

还可以和渐变背景色配合使用：

 h1.textStroke1{
    background:linear-gradient(90deg, #EEF85B 5%, #7AEC8D 53%, #09E5C3 91%);
    -webkit-background-clip:text;
    -webkit-text-fill-color:#fff;
    -webkit-text-stroke:6px transparent;
 }

效果：

GPU云服务器云服务器 css属性访问CSS属性 position属性，css 获取CSS属性值

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116549.html

CSS基础知识整理

摘要：语法基础语法规则由两个主要部分构成选择器以及一条或多条声明。语法名属性属性值属性属性值属性属性值选择器选择器用于描述一组元素的样式，也叫做类选择器。后代选则器又称为包含选择器，以空格分隔，子元素选择器只能选择作为某元素子元素的元素。 1 什么是CSS？ CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高...

Edison 2019-08-30 11:09 评论0 收藏0
图解CSS3读书笔记文本与颜色

摘要：将内容在边界内换行不截断英文单词换行语法浏览器只在半角空格或连字符的地方进行换行。个人感觉跟类似强行截断英文单词，达到词内换行效果。 CSS3文本 css字体类型属性 font-family, font-style(normal、italic、oblique[倾斜]), font-weight, font-size-adjust(定义是否强制对文本使用同一尺寸,仅火狐支持), font...

lvzishen 2019-08-28 18:26 评论0 收藏0
css实现单行、多行文本超出显示省略号

摘要：前言项目中我们经常遇到这种需求，需要对单行多行文本超出显示为省略号。单行文本省略文本溢出显示省略号文本不会换行语法默认值适用于所有元素当对象内文本溢出时不显示省略标记，而是将溢出的部分裁切掉。前言：项目中我们经常遇到这种需求，需要对单行、多行文本超出显示为省略号。这篇文章主要总结了小编解决此问题的方法，有不足之处欢迎大家指正。单行文本省略 showImg(https://segme...

wing324 2019-08-02 12:05 评论0 收藏0
css实现单行、多行文本超出显示省略号

摘要：前言项目中我们经常遇到这种需求，需要对单行多行文本超出显示为省略号。单行文本省略文本溢出显示省略号文本不会换行语法默认值适用于所有元素当对象内文本溢出时不显示省略标记，而是将溢出的部分裁切掉。前言：项目中我们经常遇到这种需求，需要对单行、多行文本超出显示为省略号。这篇文章主要总结了小编解决此问题的方法，有不足之处欢迎大家指正。单行文本省略 showImg(https://segme...

paulquei 2019-08-29 17:20 评论0 收藏0
css实现单行、多行文本超出显示省略号

摘要：前言项目中我们经常遇到这种需求，需要对单行多行文本超出显示为省略号。单行文本省略文本溢出显示省略号文本不会换行语法默认值适用于所有元素当对象内文本溢出时不显示省略标记，而是将溢出的部分裁切掉。前言：项目中我们经常遇到这种需求，需要对单行、多行文本超出显示为省略号。这篇文章主要总结了小编解决此问题的方法，有不足之处欢迎大家指正。单行文本省略 showImg(https://segme...

maxmin 2019-08-26 13:24 评论0 收藏0