文本元素 · web前端

[TOC] # 文本元素 ## 属性 ~~~ font-size:16px; 文字大小 font-weight: 700 ; 值从100-900，文字粗细,normal不加粗，不推荐使用font-weight:bold; font-family:微软雅黑; 文本的字体,最好加引号 font-style: normal | italic; normal 默认值,取消倾斜 italic 斜体 line-height: 行高 ~~~ 尽量使用偶数字号,ie6在奇数下会存在问题. 现在大部分默认是14px 字体倾斜除了用i和em之外,可以用css,但是css没有语义 ## 文本属性连写 ~~~ font: font-style font-weight font-size/line-height font-family; ~~~ ◆：注意：font:后边写属性的值。一定按照书写顺序。其中不需要的可以省略, ◆：font-size和字体font-family为必写项。各个属性空格隔开 ~~~ font:italic 700 16px/40px 微软雅黑; ~~~ ~~~ font: italic 700 16px/40px 微软雅黑; ~~~ ## 文字的表达方式直接写中文名称 ~~~ div{ font-family : 微软雅黑; } ~~~ 写字体的英文名称 ~~~ div{ font-family : "microsoft yahei"; } ~~~ unicode编码 ![](https://box.kancloud.cn/632b315b2898b09de2b87b1eb4ce36dd_290x293.png) 第一步:f12 第二步:找到console 第三步:输入`escape("宋体")` 注意英文括号和双引号,就可以得到编码了 ## 行间距 `line-height` 行与行之间的距离,字符的垂直间距,一般称为行高. 一般情况下,行距比字号大7.8像素左右就行 ## 字间距 ~~~ letter-spacing: 2px; ~~~ ## 水平对齐方式 text-align 水平对齐方式用于设置文本内容的水平对齐,相当于html中的align对齐属性可用值如下: * left: 左对齐(默认值) * right: 右对齐 * center: 居中对齐 ## 首行缩进 `text-indent` 属性值可以为不同单位的数值,em字符宽度的倍数,或相当于浏览器窗口宽度的百分比%,允许使用负值,建议使用em 1em就是一个字的宽度, 是一个字的宽度, 如果是汉字段落, 他就是汉字宽度 ## 文本装饰 `text-decoration`通常用于给链接修改装饰效果可以把a标签的下划线取消 | 值 | 描述 | | --- | --- | | none | 默认,定义标准的文本,取消装饰 | | underline | 定义文本下的一条线,下划线也是我们链接自带的 | | overline | 定义文本上的一条线 | | line-through | 定义穿过文本下的一条线 | ## 文字移除内容使用`text-indent:-5000em;` ~~~ a { display: inline-block; text-indent: -5000em; } ~~~ 将元素高度设置为0,使用内边距将盒子撑开，给盒子使用`overflow:hidden;`将文字隐藏 ~~~ .box { width: 300px; height: 0; padding-top: 100px; overflow: hidden; background: red; } ~~~ ## 图片与文字垂直对齐 ~~~ vertical-align : baseline |top |middle |bottom ~~~ 基线, 顶部, 中间, 底部 vertical-align 不影响块级元素中的内容对齐，它只针对于行内元素或者行内块元素，特别是行内块元素，通常用来控制图片和表单等。对于块元素无效行内块元素 `vertical-align:middle;`文字与图片垂直居中对齐 `vertical-align`对`inline-block`最敏感。默认属性是:`vertical-align:baseline;` ~~~ img { vertical-align: middle; } ~~~ ![](https://img.kancloud.cn/7c/a7/7ca7f20e58a3acb6629da12d64d61d3e_1790x966.png) # 文本的装饰 text-decoration 通常我们用于给链接修改装饰效果 | 值 | 描述 | | ------------ | ----------------------- | | none | 默认。定义标准的文本。 | | underline | 定义文本下的一条线。下划线也是我们链接自带的 | | overline | 定义文本上的一条线。 | | line-through | 定义穿过文本下的一条线。 | ~~~ text-decoration: none; /* 取消下划线文本装饰 */ ~~~ # 行高 line-height ## 浏览器默认文字大小浏览器默文字大小为16px 行高=文字大小+上边距+下边距 ![](https://box.kancloud.cn/439a6fe1352d3e987852ad69f374dac4_664x214.png) ## 行高的定义行高指的是文本基线与基线的距离 ![](https://box.kancloud.cn/373ce1062052d12ffeecd93d0efc3ab9_650x355.png) ## 行高的作用当文字行高与父容器的高度一样的时候，文字垂直居中对齐 ~~~ div{ height:100px; line-height:100px; } ~~~ ## 行高的单位问题 ![](https://box.kancloud.cn/d04970d2847e644ddfee7b6d5e6eb281_612x464.png) ![](https://box.kancloud.cn/7239d34f0ef1a91f059c7cb53f13170d_610x155.png) # 凹凸文字 ~~~css <head> <meta charset="utf-8"> <style> body { background-color: #ccc; } div { color: #ccc; font: 700 80px "微软雅黑"; } div:first-child { /* text-shadow: 水平位置垂直位置模糊距离阴影颜色; */ text-shadow: 1px 1px 1px #000, -1px -1px 1px #fff; } div:last-child { /* text-shadow: 水平位置垂直位置模糊距离阴影颜色; */ text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff; } </style> </head> <body> <div>我是凸起的文字</div> <div>我是凹下的文字</div> </body> ~~~ ![](https://img.kancloud.cn/c2/9f/c29f2a4dd9287d0a27fe78665e6d9464_763x205.png) # 溢出文字隐藏 ## word-break:自动换行主要处理英文单词 * normal 使用浏览器默认的换行规则。 * break-all 允许在单词内换行。 * keep-all 只能在半角空格或连字符处换行。 ~~~ <style> div { width: 120px; height: 20px; border: 1px solid #f00; word-break: keep-all; } </style> </head> <body> <div> my name is andy </div> </body> ~~~ ## text-overflow 文字溢出 ~~~ text-overflow : clip | ellipsis ~~~ 设置或检索是否使用一个省略标记（…）标示对象内文本的溢出 * clip : 　不显示省略标记（…），而是简单的裁切 * ellipsis : 　当对象内文本溢出时显示省略标记（…） # 字体图标图片是有诸多优点的，但是缺点很明显，比如图片不但增加了总文件的大小，还增加了很多额外的”http请求”，这都会大大降低网页的性能的。更重要的是图片不能很好的进行“缩放”，因为图片放大和缩小会失真。我们后面会学习移动端响应式，很多情况下希望我们的图标是可以缩放的。此时，一个非常重要的技术出现了，这就是字体图标（iconfont). **字体图标优点** ~~~ 可以做出跟图片一样可以做的事情,改变透明度、旋转度，等.. 但是本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果等等... 本身体积更小，但携带的信息并没有削减。几乎支持所有的浏览器移动端设备必备良药... ~~~ 当UI设计人员给我们svg文件的时候，我们需要转换成我们页面能使用的字体文件，而且需要生成的是兼容性的适合各个浏览器的。推荐网站：[http://icomoon.io](http://icomoon.io) **icomoon字库** IcoMoon成立于2011年，推出的第一个自定义图标字体生成器，它允许用户选择他们所需要的图标，使它们成一字型。内容种类繁多，非常全面，唯一的遗憾是国外服务器，打开网速较慢。推荐网站：[http://www.iconfont.cn/](http://www.iconfont.cn/) **阿里icon font字库** [http://www.iconfont.cn/](http://www.iconfont.cn/) 这个是阿里妈妈M2UX的一个icon font字体图标字库，包含了淘宝图标库和阿里妈妈图标库。可以使用AI制作图标上传生成。 **使用** 第一步：引入项目下面生成的fontclass代码： ~~~ <link rel="stylesheet" type="text/CSS" href="./iconfont.CSS"> ~~~ 第二步：挑选相应图标并获取类名，应用于页面： ~~~ <i class="iconfont icon-xxx"></i> ~~~ ## 字体引入html 得到压缩包之后，最后一步，是最重要的一步了，就是字体文件已经有了，我们需要引入到我们页面中。首先把文件放入到 fonts文件夹里面。通俗的做法第一步：在样式里面声明字体：告诉别人我们自己定义的字体 ~~~ @font-face { font-family: 'icomoon'; src: url('fonts/icomoon.eot?7kkyc2'); src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?7kkyc2') format('truetype'), url('fonts/icomoon.woff?7kkyc2') format('woff'), url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg'); font-weight: normal; font-style: normal; } ~~~ 第二步：给盒子使用字体 ~~~ span { font-family: "icomoon"; } ~~~ 第三步：盒子里面添加结构 ~~~ span::before { /* 对应网站上图标的这个 */ content: "\e900"; } 或者  <span></span> ~~~ # 文本一行显示出现滚动条 ~~~ p { white-space: nowrap; } ~~~ 超出省略号显示 ~~~ p { white-space: nowrap; /* 超出元素默认宽度隐藏 */ overflow: hidden; /* 使用省略号代表有内容未显示 */ text-overflow: ellipsis; } ~~~ # 多行文本溢出异常 ~~~ -webkit-line-clamp; 用该属性来限定块元素内文本显示的行数 display: -webkit-box; 将对象作为弹性的伸缩盒子显示 -webkit-box-orient; 设置伸缩盒子对象内子对象的排列方式 text-overflow: ellipse;使用省略号告诉用户有内容没显示 overflow:hidden; 超出部分隐藏 ~~~ 超出2行, 省略号显示 ~~~ p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } ~~~ 通用方法 ~~~ p { height: 30px; line-height: 2em; border: 1px solid red; position: relative; overflow: hidden; } p::after { content: "..."; position: absolute; right: 0px; bottom: 0px; padding: 0px 0px 0px 10px; background: #fff; } ~~~