css换行用省略号代替

css换行用省略号代替,也可以说是长标题的文章可以使用简单的CSS样式实现省略号控制显示. 一般的文字截断(适用于内联与块): .text-overflow{ display:block;/*内联对象需加*/ width:31em; word-break:keep-all;/* 不换行 */ white-space:nowrap;/* 不换行 */ overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */ text-overflow:ellipsis;/* 当对象内文本溢出时…

CSS换行和省略号

换行原地址:https://www.cnblogs.com/meowcool/p/10130103.html //强制不换行 div{ white-space:nowrap; } //自动换行 div{ word-wrap: break-word; word-break: normal; } //强制英文单词换行 div{ word-break:break-all; } //换行 div{ white-space:normal 默认 } //设置强行换行: //word-break: //no…

CSS换行文本溢出显示省略号

现代浏览器中使用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多余文本省略号显示本次案例代码是在 elementui 当中的 table 组件中实际需求当然使用的是纯 CSS3 代码,所以原生支持度高,兼容性高,所以可多场景应用对于过长文本进行单行省略显示,当鼠标移动到对应文本行时,展示全部,当鼠标离开后又恢复单行,多余内容收缩出现省略号; 对应文本应当转换为块元素或者使用 inline-block ; /deep/.el-table__row { .cell { //对超出内容隐藏 overflow: hidden; // 显示省略符号来代表…

CSS换行：word-wrap、word-break和text-wrap区别

一.word-wrap:允许对长的不可分割的单词进行分割并换行到下一行.(中英文处理效果一样) word-wrap有两个取值: 1.word-wrap: normal:只在允许的断字点换行(浏览器保持默认处理). 2.word-wrap: break-word:在长单词或 URL 地址内部进行换行.(即在容器末端有长单词不能完全显示,不会截断单词,而是作为整体,自动换行) 1: <!DOCTYPE> html lang="zh-en"> head> title&…

CSS换行2

1.可以使用强制换行符号<br />换行.如果在一个文章里可以在文章需要换行的地方加入<br />即可实现自动换行-常说的小换行,与换行前没有间隔.实例如下图换行说明图无间隔小换行样式-br使用 2.可以使用<p.>标签来实现大换行.如果在一个文章里需要分段换行形式,可以使用<p>标签来实现换行,但是需要注意的是p标签的用法. 大换行有间隔样式 3.可以使用CSS设置宽度自动换行.我们可以在一个div里,添加一个div并加入css样式,对加入的div设置对…

css文本超出省略号

终于完成了项目了,今天我就分享自己在项目中比较实用的一些功能的实现,第一个就是纯css文本超出省略号 /* 文本单行超出省略号 */ .textels { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; //将元素设为盒子伸缩模型显示 -webkit-box-orient: vertical; //伸缩方向设为垂直方向 -webkit-line-clamp: 1; //超出3行隐藏,并显示省略号 } /* 文本2行…

css样式显示省略号

用css样式显示省略号,记 .xx{ display: block; width:200px;/*对宽度的定义,根据情况修改*/ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } 效果图…

CSS换行：word-wrap、word-break和text-wrap差别

一.word-wrap:同意对长的不可切割的单词进行切割并换行到下一行.(中英文处理效果一样) word-wrap有两个取值: 1.word-wrap: normal:仅仅在同意的断字点换行(浏览器保持默认处理). 2.word-wrap: break-word:在长单词或 URL 地址内部进行换行.(即在容器末端有长单词不能全然显示,不会截断单词,而是作为总体,自己主动换行) 1: <!DOCTYPE> 2: <html lang="zh-en"> 3: &l…

CSS换行文本溢出显示省略号，多行

首先,div部分 <body> <div>多行的显示该如何解决呢,后面经过一番google后,我找到了chrome的一个API可以解决上面提到的需求-webkit-line-clamp</div> </body> 然后,css部分 1.单行 div { width: 150px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -w…

css强制换行显示省略号之显示两行后显示省略号

1,首先来一个固定宽度,在一行显示,超出隐藏,显示省略号的样式 display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; 2,其实来一个可以设置让它显示多少行后再显示省略号,这只能用私有属性解决了 text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box;/*重…

CSS表格溢出省略号代替及其他标签

box-shadow: 20px 20px 55px #777; // div阴影效果 filter:alpha(opacity=60) //设置透明度为60 opacity:0.6 //非IE浏览器下设置透明度为60% border-radius: 6px; //向div设置圆角边框使用表格,文字超出部分用省略号代替 table{ table-layout:fixed; } td{ border-top-style:dashed; //虚线 border-width:1px; width:1…

网页中的CSS换行控制

在进行DivCSS布局时,需要对文本进行控制,向大家介绍一下,CSS中控制换行的四种属性.一.white-space 可以实现HTML中PRE标签的效果,以及单元格的noWrap效果.语法: white-space : normal | pre | nowrap 取值: normal: 默认值.默认处理方式.文本自动处理换行.假如抵达容器边界内容会转到下一行 pre: 换行和其他空白字符都将受到保护.这个值需要IE6+或者 !DOCTYPE 声明为 standards-compliant mod…

CSS换行1

1.你定死表格的宽度,即给表格一个宽度值(是数值,不是百分比) 2.强制不换行 div{//white-space:不换行;normal 默认;nowrap强制在同一行内显示所有文本,直到文本结束或者遭遇 br 对象white-space:nowrap; } 自动换行 div{ word-wrap: break-word; //word-break设置强行换行;normal 亚洲语言和非亚洲语言的文本规则,允许在字内换行word-break: normal; } 强制英文单词断行 div{w…

css换行和超出隐藏

一.强制换行1 word-break: break-all; 只对英文起作用,以字母作为换行依据.2 word-wrap: break-word; 只对英文起作用,以单词作为换行依据.3 white-space: pre-wrap; 只对中文起作用,强制换行. word-break:break-all 和 word-wrap:break-word 都是能使其容器如DIV的内容自动换行,它们的区别在于:1.word-break:break-all 假设div宽度为450px,它的内容就会到450p…

CSS 换行问题white-space属性 window对象和global对象

white-space: nowrap禁止换行 1.word-wrap:break-word; 内容将在边界内换行,仅用于块对象,内联对象要用的话,必须要设定height.width或display:block或position:absolute. 2.word-break:break-all; 用于处理单词折断.(注意与第一个属性的对比) 3.white-space:nowrap; 用于处理元素内的空白,只在一行内显示. 4.overflow:hidden; 超出边界的部分隐藏. 5.text…

利用css实现带有省略号的段落

带有省略号的段落就是你只能在一行显示一段文字,文字过长是肯定不能完全显示的,如果默认的话,超出的文字会自动换行,撑大盒子. 1.这时需要设置white-space: nowrap,禁止换行.这样的话,文字就会在一行显示 2.在一行显示就会有超出的部分,使用overflow: hidden将超出的部分隐藏. 3.虽然隐藏了,但是有可能最后一个字被挡住一部分,而且我们需要的是省略号,这时再加上text-overflow: ellipsis;就可以将最后改成省略号. white-space: nowr…

css换行

1. word-break:break-all;只对英文起作用,以字母作为换行依据 2. word-wrap:break-word; 只对英文起作用,以单词作为换行依据 3. white-space:pre-wrap; 只对中文起作用,强制换行 4. white-space:nowrap; 强制不换行,都起作用 5. white-space:nowrap; overflow:hidden; text-overflow:ellipsis;不换行,超出部分隐藏且以省略号形式出现(部分浏览器支持) 代…

CSS 换行知多少: word-wrap && word-break && white-space && word-spacing

word-wrap : 首先提一下,word-wrap 这个 CSS 属性在CSS3中已经被更名为 overflow-wrap,这样语义化也是为了避免与 word-break 混淆: Reference: The overflow-wrap property is used to specify whether or not the browser may break lines within words in order to prevent overflow when an otherwis…

css 文字超出省略号

white-space:nowrap; overflow:hidden; -o-text-overflow:ellipsis; text-overflow:ellipsis; 语法: text-overflow : clip | ellipsis 参数: clip : 不显示省略标记(...),而是简单的裁切 (clip这个参数是不常用的!) ellipsis : 当对象内文本溢出时显示省略标记(...) 说明: 设置或检索是否使用一个省略标记(...)标示对象内文本的溢出. 请您注意,text…

CSS换行知识

换行规则 CSS可以指定文字多行时换行的规则,说白了就是指定哪些地方可以换行相关属性 word-break The word-break CSS property sets whether line breaks appear wherever the text would otherwise overflow its content box. word-break属性决定了文本溢出时内容区的文本换行方式属性值关键值 normal(默认值) break-all 允许任意非CJK(Chine…

CSS—换行

关于文本溢出换行问题,先看下涉及到换行的相关属性,查看:http://www.w3school.com.cn 一.word-break 定义:word-break 属性规定自动换行的处理方法. 值描述 normal 使用浏览器默认的换行规则. break-all 允许在单词内换行. keep-all 只能在半角空格或连字符处换行. 二.word-wrap 定义:word-wrap 属性允许长单词或 URL 地址换行到下一行. 值描述 normal 只在允许的断字点换行(浏览器保持默认处理).…

（转）css换行样式：word-wrap同word-break的区别

以下是引用片段: word-wrap:break-word; overflow:hidden; 而不是以下是引用片段: word-wrap:break-word; word-break:break-all; 也不是以下是引用片段: word-wrap:break-word; overflow:auto; 在 IE 下没有任何问题,在 FF 下,长串英文会被遮住超出的内容. word-wrap同word-break的区别 word-wrap: normal Default. Content e…

css溢出显示省略号

单行溢出省略号 .show-detail li .info-name { width:278px; display:inline-block; /*下面是重点*/ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } 多行溢出省略号 .show-detail li .info-intro { width: 278px; /*下面是重点*/ overflow: hidden; text-overflow: ellipsi…

css换行缩进

1.换行缩进 <div id="alertiframe"> <span id="closeiframe">×</span> <p style="font-size:16px;font-weight:bold;text-align:center;text-indent:-35px;margin-left:40px">提现政策</p> <p style="text-inden…

word-break属性和css换行显示

这几天在做项目的时候,遇到了比较棘手的问题,便是在一个标签里边展示内容,如果说展示中文汉字,一点问题都没有,但是只要连续展示英文字母或者中文的标点符号(中间不带空格),那么所渲染的内容就不会换行,而是超出标签来显示,如下图: 为了解决让所有的内容都不超出标签的宽度,超出后自动换行的问题,便找到了word-break这个属性. word-break的其中有两个值为break-word和break-all,下面将对这两个值做一比较: break-word:英文单词在一行中所剩下的空间无法放下,那么这…

CSS 换行

默认情况下,元素的属性是 white-space:normal:自动换行:(不把单词截断,会把单词看作一个整体) -----但是但是但是但是..当元素中的内容是一对没有空格的字符/数字时,超过容器宽度就会把容器撑大,不会换行了. 强制换行: // 会把单词截断进行换行: word-break: break-all; // 不会把单词截断,会把单词看作一个整体: word-wrap: break-word; 强制不换行: white-space: nowrap;…

简单记录（css换行带点与不带点）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con…

css 超出两行省略号,超出一行省略号

参考:https://www.cnblogs.com/yangguojin/p/10301981.html 超出一行省略: p{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } 超出2行省略: p { overflow:hidden; text-overflow:ellipsis; display: -webkit-box; -webkit-box-align: start; //让内容居左 /*! autoprefi…

css 文本溢出省略号

单行溢出显示省略号: white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 多行溢出显示省略号: text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; //此处数字意思是最多显示几行 -webkit-box-orient: ver…

【css换行用省略号代替】的更多相关文章