郑州做网站推广哪家好,家居设计案例,百度搜索排名推广,html网站地图生成前面的话 CSS3新增了一些关于文本的样式#xff0c;其中text-overflow文本溢出和text-shadow文本阴影有些特别。因为它们有对应的overflow溢出属性和box-shadow盒子阴影属性。本文将详细介绍这两个作用在文本上的溢出和阴影属性 文本溢出 一般地#xff0c;人们一提到文本溢出…前面的话 CSS3新增了一些关于文本的样式其中text-overflow文本溢出和text-shadow文本阴影有些特别。因为它们有对应的overflow溢出属性和box-shadow盒子阴影属性。本文将详细介绍这两个作用在文本上的溢出和阴影属性 文本溢出 一般地人们一提到文本溢出想到的就是文本溢出的经典代码 white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; 但实际上文本换行不一定非要使用white-spaceoverflow属性值也不一定非要使用hidden
定义
text-overflow 值: clip | ellipsis 初始值: clip 应用于: 块级元素、替换元素、表单元格 继承性: 无 clip: 不显示省略标记(...)只是简单的裁切相当于无效果
ellipsis: 文本溢出时显示省略标记(...)省略标记插入的位置是最后一个字符 [注意]当文本溢出属性应用于表单元格时需要设置table-layout:fixed [注意]该属性兼容性很好兼容IE6 的主流浏览器及移动端iso和android
实现
【1】当存在长英文文本时text-overflow属性起作用的前提是 overflow(或overflow-y或overflow-x):hidden | auto | scroll 【2】当文本为汉字时text-overflow属性起作用的前提是 实现汉字不自动换行可使用word-break: keep-all; 或 white-space: nowrap;
overflow(或overflow-y或overflow-x):hidden | auto | scroll stylewidth: 100%; height: 600px; srchttps://demo.xiaohuochai.site/css/textoverflow/t1.html frameborder0 width320 height240
【多行文本溢出】 在webkit浏览器中有一个不规范的属性-webkit-line-clamp它可以实现多行文本溢出。它的值是一个number设置为几便可以设置相应数字的文本溢出 设置多行文本溢出还需要配合其他样式样式如下 /*溢出隐藏*/
overflow:hidden;
/*旧版本flex*/
display:-webkit-box;
/*旧版伸缩流方向为垂直方向*/
-webkit-box-orient:vertical;
/*溢出隐藏3行*/
-webkit-line-clamp: 3; 实例如下 div stylewidth:300px;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp: 3;
我是测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字
/div stylewidth: 100%; height: 90px; srchttps://demo.xiaohuochai.site/css/textoverflow/t2.html frameborder0 width320 height240 [注意]不要显式地设置高度而应该让其自适应高度否则会造成如下效果 div stylewidth:300px;height: 75px;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp: 3;
我是测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字
/div stylewidth: 100%; height: 100px; srchttps://demo.xiaohuochai.site/css/textoverflow/t3.html frameborder0 width320 height240 文本阴影 类似于盒子阴影文本阴影也有x轴偏移、y轴偏移、模糊半径和阴影颜色这四个值但是并没有阴影尺寸和内部阴影这两个值
定义
text-shadow 值: none | (h-shadow v-shadow blur color) 初始值: none 应用于: 所有元素 继承性: 无 h-shadow: 水平阴影位置(必须)
v-shadow: 垂直阴影位置(必须)
blur: 模糊距离(该值不能为负值可选)
color: 阴影颜色默认和文本颜色一致(可选) [注意]该属性IE9-浏览器不支持 stylewidth: 100%; height: 320px; srchttps://demo.xiaohuochai.site/css/textoverflow/t4.html frameborder0 width320 height240 //多层阴影
text-shadow: 1px 1px blue,5px 5px 5px red; stylewidth: 100%; height: 50px; srchttps://demo.xiaohuochai.site/css/textoverflow/t5.html frameborder0 width320 height240 [注意]不要加太多层阴影会有性能问题
常见效果 stylewidth: 100%; height: 400px; srchttps://demo.xiaohuochai.site/css/textoverflow/t6.html frameborder0 width320 height240
【文字阴影代码查看】 更多专业前端知识请上
【猿2048】www.mk2048.com