css超出一行省略号:text-overflow和white-space超出隐藏显示省略号
css超出一行省略号:text-overflow和white-space超出隐藏显示省略号
通过使用text-overflow和white-space属性来使文本在一行内显示,超出则加省略号,添加如下HTML代码:
<p>前端开发博客专注前端开发和技术分享,如果描述超过100像素,则会隐藏,添加省略号</p>
CSS:需要加上宽度(width:100px)、超出隐藏(overflow:hidden;)、强制在同一行显示(white-space: nowrap;)、省略号(text-overflow:ellipsis;)
p{width: 100px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
测试浏览器: IE6/7/8/9、opera12.02、firefox15.0.1、chrome21.0.1180.89 m
1、text-overflow: ellipsis;
这里的重点样式是 text-overflow: ellipsis;
不过话说text-ellipsis是一个特殊的样式,有关解释是这样的:text-overflow属性仅是注解,当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。要实现溢出时产生省略号的效果还须定义:强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏(overflow:hidden),只有这样才能实现溢出文本显示省略号的效果。
这里面需要限定宽度、文字显示在一行中(white-space:nowrap;)和使用隐藏属性overflow。
网上给支持低版本的opera一个办法,就是-o-text-overflow:ellipsis;
2.white-space属性
定义:white-space 属性设置如何处理元素内的空白。
实例:规定段落中的文本不进行换行:
p{ white-space: nowrap;
}
可能的值
值 | 描述 |
---|---|
normal | 默认。空白会被浏览器忽略。 |
pre | 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。 |
nowrap | 文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。 |
pre-wrap | 保留空白符序列,但是正常地进行换行。 |
pre-line | 合并空白符序列,但是保留换行符。 |
inherit | 规定应该从父元素继承 white-space 属性的值。 |
Object.style.whiteSpace=normal|nowrap|pre
3.word-wrap
定义:word-wrap 属性允许长单词或 URL 地址换行到下一行。
实例:允许长单词换行到下一行:
p.test {word-wrap:break-word;}
可能的值:
值 | 描述 |
---|---|
normal | 只在允许的断字点换行(浏览器保持默认处理)。 |
break-word | 在长单词或 URL 地址内部进行换行。 |
1.(IE浏览器)连续的英文字符和阿拉伯数字,使用word-wrap : break-word ;或者word-break:break-all;实现强制断行
2.(Firefox浏览器)连续的英文字符和阿拉伯数字的断行,Firefox的所有版本的没有解决这个问题,我们只有让超出边界的字符隐藏或者,给容器添加滚动条
.a{word-break:break-all; width:200px; overflow:auto;}
.(Firefox浏览器)使用 table-layout:fixed;强制table的宽度,内层td,th采用word- break : break-all;或者word-wrap : break-word ;换行,使用overflow:hidden;隐藏超出内容,这里overflow:auto;无法起作用
css超出一行省略号:text-overflow和white-space超出隐藏显示省略号相关推荐
- CSS设置文本超出隐藏显示省略号
CSS设置文本超出隐藏显示省略号 单行文本 多行文本 在线试一试 单行文本 HTML代码如下: <pclass="ellipsis1"title="单行文本,超出隐 ...
- CSS div内文字溢出部分隐藏显示...省略号
div内文字溢出部分隐藏显示-省略号 单行溢出显示省略号: overflow: hidden; white-space: nowrap;//内容超出不换行 text-overflow: ellipsi ...
- css单行、多行文本溢出隐藏显示省略号
单行文本溢出隐藏 overflow: hidden; // 溢出隐藏 text-overflow: ellipsis; // 文本溢出时发生的事,ellipsis表示用省略号代替溢出的文本 white ...
- 单行文字溢出隐藏显示省略号
单行文字溢出隐藏显示省略号 1. 让换行的文字强制在一行显示.属性 white-space: nowrap; 2. 溢出的部分隐藏.overflow: hidden: 3. 文字溢出显示用省略号. t ...
- 全局mixin封装文本溢出隐藏显示省略号
全局mixin封装文本溢出隐藏显示省略号 @mixin ellipsis2($line) {display: -webkit-box;overflow: hidden;text-overflow: e ...
- css超出隐藏显示省略号
width: 300px; overflow: hidden;/*超出部分隐藏*/ text-overflow:ellipsis;/* 超出部分显示省略号 */ white-space: nowrap ...
- 实现一行或多行文字溢出隐藏显示省略号
1.css控制文字只显示一行,超出部分显示省略号 例如:1行后省略 <style> p{ width:300px; overflow:hidden; white-space:nowrap; ...
- css文本溢出隐藏显示省略号
一.单行文本显示省略号 1.先强制文本一行内显示 white-space:nowrap(不换行); 2.超出部分影藏 overflow:hidden; 3.用省略号代替超出的部分 text-overf ...
- 文本CSS多行溢出隐藏显示省略号
处理动态文本超长问题: 如下图,显然不符合美观视觉 此时我们可以这样写,文字不换行溢出显示省略号: {white-space: nowrap;text-overflow: ellipsis;overf ...
最新文章
- SYBASE里面出现客户端和服务器端字符集不匹配的情况解决方法
- Qt实现对json文件的解析
- android应用开发(22)---Activity的生命周期
- 单片机c语言二进制转10进制,51单片机用C语言怎么样把八位二进制转换成十进制...
- python求两个数的最大值、用带参函数实现_Python有参函数使用代码实例
- Github大盘点!2021年最惊艳的38篇AI论文
- python datetime.datetime.now_python时间日期datetime模块
- bitlocker正在加密 c盘_如何扩容C盘(扩容卷变灰问题)
- CSND Markdown模板
- python爬虫爬当当网_python爬取当当网图书排行榜
- SpringBoot实现文件在线预览
- CART 分类决策树
- 软件测试书籍有哪些_软件测试书籍推荐
- 数据库名、实例名、数据库域名、全局数据库名、服务名 ,
- java 比较日期大小(方法之一compare to 备忘)
- qtabwidget右键菜单_QTableWidget添加右键菜单的详细过程
- ERP-非财务人员的财务培训教(一.二)------财务基础知识
- Nuscenes——环视相机下BEV时序融合:前后帧空间对齐操作
- SEO优化基础:SEO的优势与劣势
- Element ui 组件中用键盘事件