CSS 2 文本⑤

在实际的设计过程中，为了排版的好看，比如上面这行字，经常有这样的需求，当放不下的时候，我们会让它显示 ····

那么这个.... 用css怎么实现呢？我们可以用 text - overflow

　　text - overflow

　　text - overflow : clip | ellipsis

　　clip : 默认值

　　ellipsis：省略号

　　overflow : hidden ; 溢出的时候把它截掉，如果没有这个，溢出的时候不截掉，那text-overflow就不起作用了

　　white - space : nowrap: 如果不写这个，那他就会自动换行了，就达不到这种效果

　　所以我们在写text-overflow ：ellipsis 的时候一定要配合这两个值一起写

　　　　　　　　　　　　　　　　　　　 | 效果是这样的

　　　　　　　　　　　　　　　　　　　　　　　|　我们希望鼠标移到按钮上的样式是这样的

　　　　　　　　　　　　　　　　　　　　　　　| 但实际是这样的

　　　　　　那我们怎么办呢？我们可以用 cursor 来定义它鼠标的形状

　　　　　　这些小的是不常用的可以忽略

　　　　　　　　<uri>* : 可以自定义一张图片而且url是可以写多个的

　　　　　　　auto：自动处理可能移到一个超链接的时候他就是一个鼠标手型

　　　　　　　default ：普通光标

　　　　　　　none ：鼠标消失

　　　　　　　help ：鼠标带个问好

　　　　　　　pointer：鼠标手型

　　　　　　 zoom - in ：放大镜

　　　　　　　zoom - out ：缩小镜

　　　　　　　move ：会有往两边的箭头已经上下的箭头移动一些元素的时候我们会用到这个

　　　　　　　cursor : pointer ; 显示一个手型

　　　　　　　cursor : url (xx.cur), pointer; 使用自定义的按钮样式，后面接一个自带的手型，如果自定义的样式图片出了问题，就会用自带的样式，相当于一个备用的

　　　强制继承

　　inherit

原文地址：https://www.cnblogs.com/hzaixt/p/9296923.html

时间： 2024-10-07 05:02:40

CSS 2 文本⑤的相关文章

css实现文本超出li宽度的部分隐藏

css实现文本超出li宽度的部分隐藏:在某些实际应用中,希望把文本超出的部分隐藏而非换行,下面就是一段这样的代码实例,大家可以参考一下.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title&

现代浏览器中使用css可以实现文本溢出,使用 text-overflow: ellipsis;在有些场景下没有效果,这个时候你需要检查应用的场景是是否是块元素,是否有确切的width. 如果是行内元素则需要使用display设置为inline-block; 下面是对a,span等行内元素的使用CSS换行文本溢出显示省略号的比较准确的用法: a,span { overflow: hidden; text-align: center; text-overflow: ellipsis; white-s

css常用文本属性

[CSS常用文本属性] 1. 字体.字号类: ① font-weight: 字体粗细. bold-加粗.normal-正常.lighter-细体也可以使用100-900数值,400表示normal,700表示bold ② font-style: 字体样式. italic-倾斜.normal-正常 ③ font-size: 字号. 可以写px单位,也可以写% 200%表示浏览器默认大小(16px)的两倍=32px ④ font-family: 字体系列(字体族). >>> 可以直接写字体

css 构造文本

css 构造文本 1. 首行缩进 text-indent :20px; 2em; 10% 2. 文本对齐 text-align : left, right ,center , 3. 文本行高 line-height 4. 字间隔 word-spacing 5. 字母间隔 letter-spacing 6. 文本修饰 text-decoration : underline, overline ,lint-through 7. 字体 font-family 8. 字体大小 font-size 9.

CSS控制文本超出指定宽度后用省略号代替，CSS控制文本不换行

CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行. 一般的文字截断(适用于内联与块): .text-overflow { display:block;/*内联对象需加*/ width:31em; word-break:keep-all;/* 不换行 */ white-space:nowrap;/* 不换行 */ overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */ text-overflow:ellipsis;

CSS中文本继承情况

无继承性的属性 http://www.cnblogs.com/thislbq/p/5882105.html vertical-align: 垂直文本对齐 CSS中文本可以继承父级样式体系列属性 font:组合文字 font-family:字体系列 font-weight:文字粗细 font-size:文字大小 font-style:文字风格文本系列 text-indent:文本缩进 text-align:文本对齐方式 line-height:行高 color:文本颜色

CSS实现文本溢出的部分用省略号代替的方法

我们通常在设计网页的时候,由于相关的需求需要一行定宽,然而有时候文字的展现过长就会溢出.今天,E良师益友网就单行和多行两种情况来说明一下溢出的文字用省略号代替. 一.单行溢出 1,单行溢出,超出部分显示...或者截取.前提必须有宽度. CSS:{width:xxpx;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;},截取为clip; 实现代码: width:300px; overflow: hidden; text-overf

学习css之文本属性

css3之文本属性: 1.缩进和水平对齐:text-indent, 通过使用 text-indent 属性,所有元素的第一行都可以缩进一个给定的长度,甚至该长度可以是负值. 这个属性最常见的用途是将段落的首行缩进,下面的规则会使所有段落的首行缩进6 em:p {text-indent:6em;} text-indent 属性可以继承. 2.水平对齐:text-align 是一个基本的属性,它会影响一个元素中的文本行互相之间的对齐方式. 取值范围:{left:把文本排列到左边.默认值:由浏览器决定

css中文本框与按钮对不齐解决方案

我们先对对input标记设定样式,代码如下: html 代码 <form> <input type=”text” name=”text1” id=”text1” /> <input type=”submit” name=”button” id=”button” value=”提交” /> </form> CSS 代码 #text1{border:1px solid red;height:20px;} #button{background:#FFFFFF;co