CSS 2 文本③

　　定义的文本

　　　　　　|　　想要这段文本

——按照这样的格式展现出来但是事与愿违

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　但他是这样呈现的　　　　　　　　　　　|　

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　它最后变成了单行没有按照我们想要的格式去展现那我们可以通过white-space 属性来修改

　　　　white - space

　　　　white - space : normal | nowrap | pre | pre-wrap | pre-line

　　　　normal : 由浏览器决定的

　　　　　　　　pre - wrap 平常用的比较多

　　　　　　New Lines : 换行

　　　　　　Spaces and Tabs : 连续的空格和连续的tab 或者空格tab空格tab

　　　　　　Text Wrapping : 自动换行

　　　　　　Collapse ：合并成一个空格

　　　　　　wrap ：会自动换行　　　　　　

　　　　　　No wrap : 不会自动换行，强制一行，那一行写不下了就会超出去

　　　　　　Preserve ：保留

　　解析：我们发现一个单词非常长不会自动换行我们希望它是这样子的

　　这个单词我们不管有多长都希望它会自动换行我们可以用 word - wrap

　　word - wrap :单词换行

　　word - wrap : normal | break - word | break - all

　　normal : 正常的

　　break - word : 自动换行

　　但是我们发现一些问题右上角留出空白来了从视觉效果来是不符合我们预期的那我们就要用到 break-all

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

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

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