css3--text-overflow超出文本隐藏

 1 <style>
 2 .div1 {
 3     width: 200px;
 4     height: 200px;
 5     background: red url(img/user.png) no-repeat;
 6     text-overflow: ellipsis;
 7     white-space: nowrap;
 8     overflow: hidden;
 9 }
10 .div1:hover {
11     overflow: visible;
12     text-overflow: inherit;
13 }
14
15 </style>
1 <div class="div1">
2         qwe Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae voluptatem sapiente fuga facere molestias numquam officiis beatae ex sit atque aspernatur quisquam commodi ratione perspiciatis ducimus dolor minima itaque obcaecati!
3 </div>
时间: 2024-11-01 07:13:10

css3--text-overflow超出文本隐藏的相关文章

css3实现超出文本指定行数(指定文本长度)用省略号代替

测试代码: 1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> 6 <meta http-equiv="Content-Type" content=&qu

超出文本显示省略号

对于大多数刚入门的程序员,都是不是太注重代码的细节,也就是写出来的代码不是太完善.有些我们设置的标签能放下6个字,后期我们又要加多几个字,又不能改变标签的宽度,又要保持外观样式的美观性,那我们怎么办的?下面我就给大家介绍一种超出文本显示用省略号代替的一种方法. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>省略号&

JQuery 简单的文字超出部分隐藏下拉显示

HTML代码: <body> <div class="txt_bos"><!--在每一个放置文字的class外面包一个div,以便设置动画样式用,同样用class--> <div class="txt1"><!--为了保证功能的通用性,这里全用class--> 石村,位于苍莽山脉中,四周高峰大壑,茫茫群山巍峨. 清晨,朝霞灿灿,仿若碎金一般洒落,沐浴在人身上暖洋洋. 一群孩子,从四五岁到十几岁不等,能有数十

《CSS3实战》笔记--文本阴影:text-shadow

通过阅读和学习书籍<CSS3实战>总结 <CSS3实战>/成林著.-北京机械工业出版社2011.5 语法: none|<length>|none|[<shadow>,]*<shadow> 或 none|<color>|[,<color>]* 取值简单说明: 表示颜色: 表示由浮点数字和单位标识符组成的长度值,可为负值,指定阴影的水平延伸距离: 表示由浮点数字和单位标识符组成的长度值,不可为负值,指定模糊效果的作用距离.如果

超出文本截取替换为省略号

今天做了一个如下图的模块 其中,标题以及介绍这两块都需要做超出某个宽度就截取一行或两行文字,后面用省略号代替. 由于是做的手机页面,用JS来开销太大,只能从CSS入手. 一行的很好解决. 如下就OK了. white-space:nowrap;overflow:hidden;text-overflow:ellipsis; 多行的想了很久,比如,写定行高,超出隐藏,弄个省略号作为补丁打在尾部.但是有个问题,页面宽度不固定,可能会出现只遮住一半字的情况,看起来很Low. 继续查找资料,CSSV5啊!

CSS常用字体属性(多出的文本隐藏,或者以省略号的形式显示)和背景样式以及背景图的2个不常用属性:background-origin和background-clip

(一)常用的字体属性: font-weight: 属性值100-900  400等于正常 700等于bold ,数值越大,越粗 font-size:字体大小,单位可以为px或者% font-family:字体族 比如说:微软雅黑 font-style:字体的样式 italic斜体 normal正常 font-variant:small-caps 将字母转化为小一号的大小字母 注意:所有属性也可以通过font一个属性写,例如: font:italic bold 75%/1.8 'Microsoft

表格超出部分隐藏

<html><head> <style type="text/css"> td{ white-space:nowrap;text-overflow: ellipsis;overflow: hidden; } </style></head><body> <table width="350px" border="1" cellspacing="0" ce

使用CSS3创建文字颜色渐变(CSS3 Text Gradient)

考虑一下,如何在网页中达到类似以下文字渐变的效果? 传统的实现中,是用一副透明渐变的图片覆盖在文字上.具体实现方式可参考 http://www.qianduan.net/css-gradient-text-effect.html .这种方式优点是图片可控,所以可实现很复杂的渐变效果,但是缺点是图片渐变色必须与背景色一致,同时损失了鼠标点击.文字选择等事件. 改进的方法可以使用 CSS3 的背景渐变 -webkit-gradient ,用一个背景渐变的 DIV 代替图片.下面是实现效果示例,相比以

css文本截字,超出文本省略号显示

一.单行文本截字 p { text-overflow: ellipsis;/*显示省略号代替裁剪的文本*/ white-space: nowrap;/*空白处理方式 不换行*/ overflow: hidden;/*溢出隐藏*/ } 效果: 二.多行文本截字 p{ display:-webkit-box;/*设置盒子为弹性盒容器*/ -webkit-box-orient:vertical;/*设置盒子内部排列方式为垂直排列*/ -webkit-line-clamp:2;/*显示两行*/ text