如何解决Css属性text-overflow:ellipsis 不起作用(文本溢出显示省略号)
如何使text-overflow:elipsis起作用?
想要使用css属性text-overflow:elipsis起到作用,样式必须跟overflow:hidden; white-space:nowrap;width:150px;一起使用
1、text-overflow语法:
text-overflow : clip | ellipsis
2、text-overflow参数说明:
clip: 不显示省略标记(...),而是简单的裁切
elipsis: 当对象内文本溢出时显示省略标记(...)
3、简单使用:
<!doctype html> <html><head><meta charset="utf-8"><title>测试页面</title></head><style type="text/css"> .test{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;width:150px;}</style><body><ul id="textFlow"><li class="test"><a href="#">第一标题:奇艺之旅</a></li><li class="test"><a href="#" title="第二标题:萨迪斯的项圈的奇闻异事">第二标题:萨迪斯的项圈的奇闻异事</a></li><li class="test"><a href="#" title="第三标题:杜斯的奇妙之旅。测试数据。测试数据">第三标题:杜斯的奇妙之旅。测试数据。测试数据 </a></li></ul></body> </html>
4、演示效果:
转载于:https://www.cnblogs.com/xielong/p/7341037.html
如何解决Css属性text-overflow:ellipsis 不起作用(文本溢出显示省略号)相关推荐
- css overflow 省略号,图文详解CSS文本溢出显示省略号效果(text-overflow)
在工作中经常会遇到文本溢出,需要显示省略号的情况,那这个省略号是怎么实现的呢?这篇文章就给大家讲讲CSS中如何用text-overflow实现超出部分显示省略号.对CSS文字溢出加省略号这个知识不熟悉 ...
- web前端培训:CSS中单行文本溢出显示省略号的方法
CSS中单行文本溢出显示省略号的方法你知道吗?在web前端技术学习中,这个问题其实是属于老生常谈了,因为css单行文本的应用是非常频繁的,比如网站最基本的文章列表,标题会很长,而显示列表的区域宽度却没 ...
- 关于文本溢出显示省略号、圣杯双飞翼布局、CSS Hack、PS基础、以及项目的一些规范
溢出显示省略号 单行文本溢出显示省略号 方法一: .box{width:100px; border:1px solid red; /* 设置内容不换行 */white-space:nowrap;/ ...
- CSS实现文本溢出显示省略号
html: <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
- web前端基础 html5+css3(九.精灵图,字体图标,css三角,鼠标样式cursor,.轮廓线 outline,vertical-align,文本溢出显示省略号)
1.精灵图(有效减少服务器介绍和发送请求的次数,提高页面的加载速度) 将网页的小背景图像整合到一张大图中,这样服务器只需要请求一次就可以了 background-position (图片往坐标左边走) ...
- 【用CSS让单行文本溢出显示省略号】
如何用CSS让单行文本溢出显示省略号 <style> p { 1.设置宽高 width:160px; height:20px; font:size:16px; background-col ...
- css文本溢出显示省略号
1.单行文本溢出显示省略号 overflow: hidden;(文字长度超出限定宽度,则隐藏超出的内容) white-space: nowrap;(设置文字在一行显示,不能换行) text-overf ...
- CSS文本溢出显示省略号怎么实现?
前言 我们经常会遇到网页中有文字溢出会显示省略号,那么这种效果怎么实现呢?本文分别介绍了单行文本溢出显示省略号和多行文本溢出显示省略号的实现方法. 一.单行文本溢出显示省略号 代码示例: <!D ...
- CSS -文本溢出显示省略号
单行文本溢出 .hidden {overflow: hidden;(文字长度超出限定宽度,则隐藏超出的内容)white-space: nowrap;(设置文字在一行显示,不能换行)text-overf ...
最新文章
- VS各种错误集成总结,持续更新
- 离线部署 CDH 5.12.1 及使用 CDH 部署 Hadoop 大数据平台集群服务
- 【Flutter】Dart 面向对象 ( get 方法 | set 方法 | 静态方法 )
- linux GDB详解
- fedora 用安装 DVD 建立本地 yum 源
- E:Johnny and Grandmaster
- 【BZOJ1934】【codevs2341】善意的投票,二分图最小割
- 格式化输出,while循环,运算符,初识编码
- java object类的方法,JAVA中Object类中 有几个方法?
- featuretools,可自动构造机器学习特征的Python库
- 不会做PPT图表?1000个高大上的PPT图表,0门槛0套路,想要就给你
- 新编16 32位微型计算机答案,新编1632位微型计算机原理及应用.习题解答.ppt
- 鼠标划定区域的屏幕翻译 python3
- barman备份软件离线安装渡劫文
- python爬取自如房间信息(一)
- 老子五千言(帛书版道德经)
- 397高校毕业设计选题
- 偏序集的Dilworth定理学习 (转载)
- python filter和map的区别_js中filter和map的区别
- 跟着乔布斯上一堂管理课
热门文章
- docker cp传递整个目录
- 浏览器F12进行Web程序调试
- win系统的VBS脚本简易教程
- 高亮显示化学结构式中的子结构----Highlight a substructure in the depiction
- 音视频技术之《移动直播秒开优化经验》
- 二级考试c语言中 星号与字母 题型总结,计算机等级C语言上机考试编程题分类总结.doc...
- 【LeetCode】一年中的第几天
- 中国人误传了数千年的七句话(不可不看!) 转帖
- [http]http转义和加解密方法
- 水溶性/脂溶性/Cy3/Cy3.5/Cy5 NHS ester 染料在活体成像中的应用