text-overflow:ellipsis
关键字: text-overflow:ellipsis
语法:text-overflow : clip | ellipsis
取值:
clip :默认值 。不显示省略标记(...),而是简单的裁切.
ellipsis: 当对象内文本溢出时显示省略标记(...).
可惜text-overflow 还只是ie的私有属性而已,也没被收录到w3c标准里 .
如果想让某个容器(div或者li或者...块级元素)显示一行文字,当文字内容过多时,不换行,而是出现...
这样写:例如
Html代码
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title></title>
- <style type="text/css">
- #box{width:100px;background-color:#87CEEB;padding:2px 3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
- </style>
- </head>
- <body>
- <div id="box">锦江之星旅馆有限公司系亚洲规模最大的综合性旅游企业集团</div>
- </body>
- </html>
注意:overflow: hidden; text-overflow:ellipsis;white-space:nowrap;一定要一起用
1.一定要给容器定义宽度.
2.如果少了overflow: hidden;文字会横向撑到容易的外面
3.如果少了white-space:nowrap;文字会把容器的高度往下撑;即使你定义了高度,省略号也不会出现,多余的文字会被裁切掉
4.如果少了text-overflow:ellipsis;多余的文字会被裁切掉,就相当于你这样定义text-overflow:clip.
如果容器是table,当文字内容过多时,不换行,而是出现...
转载于:https://www.cnblogs.com/xisitan/p/4860853.html
text-overflow:ellipsis相关推荐
- html5 text overflow,text-overflow属性怎么用
text-overflow属性用于指定当文本溢出包含它的元素时,应该发生的事情. CSS3 text-overflow属性 作用:text-overflow 属性规定当文本溢出包含元素时发生的事情. ...
- web兼容性面试题及答案
1. HTML 对象获取问题 FireFox:document.getElementById("idName"); ie:document.idname 或者 document.g ...
- css使用三个属性设置文本结尾省略号显示
三个css属性设置文本内容超出部分,省略号显示 文章目录 前言 一.三个属性 二.属性使用 三.使用 总结 前言 本篇文章主要记录了css样式设置文本超出部分省略号显示,适用于input标签和普通标签 ...
- img 隐藏_CSS3界面样式和溢出文字隐藏overflow
哈喽大家好,我是作者"未来",本期分享的内容是Web前端系列课程,本系列总共29个阶段,坚持学习3个月蜕变为Web前端高手哦! 志同道合的小伙伴跟我一起学习交流哦! 第二阶段 CS ...
- 解决text-overflow: ellipsis;不生效的问题
按照text-overflow: ellipsis;使用规则,在标签样式中添加该属性未生效,例如: 写道 .text { text-overflow: ellipsis; } <div clas ...
- Flutter Text详解
示例 API Text,很常用的一个Widget:用于显示简单样式文本,它包含一些控制文本显示样式的一些属性 text构造方法源码: /// If the [style] argument is nu ...
- 【Flutter】Text的使用
想了解更多关于Flutter的知识,可以关注: https://github.com/jiangkang/flutter-system https://jiangkang.tech 文本作为UI最基本 ...
- 从零开始前端学习[17]:overflow超出是否隐藏的使用方式
overflow超出是否隐藏的使用方式 overflow属性及属性值的使用 单方向属性:overflow-x 单方向属性:overflow-y 提示 博主:章飞_906285288 博客地址:http ...
- 表格单元格中的CSS文本溢出?
本文翻译自:CSS text-overflow in a table cell? I want to use CSS text-overflow in a table cell, such that ...
- CSS3学习笔记-字体和文字
字体 字体族font-family 通常需要给处字体栈以适应不同机器间的适配,多单词字体需要用引号 body{font-family:"trebuchet ms", tahoma, ...
最新文章
- 2周修改了1000多个Bug后软件项目扭转了局面,未交付银行的现金管理系统健壮起来了...
- docker compose部署服务
- Spark SQL 编程API入门系列之SparkSQL数据源
- SpringMvc01 第一个Springmvc应用
- javascript和python的关系_JavaScript是否越来越像Python?
- Linux管道函数使用
- 如何构建React-Native图库教程
- 80后的你现在有多少资产?
- hive外部表/内部表路径知识点
- 学习总结之 WebApi 用户登录和匿名登录,及权限验证
- GridView 换行设置
- 服务器每天自动变密码,Windows自动修改系统密码分享
- 鸿蒙之境浩然溟涬,泰泉集-明-黄佐.pdf
- 一个c语言源文件可以包含两个以上main,二级C语言习题汇总及标准答案.doc
- C语言实现一维信号小波阙值去噪
- 【Linux】Linux权限管理————shell运行原理 | Linux权限管理 | 粘滞位 | 权限掩码umask
- 移动端表格 横向纵向自适应
- 340. 至多包含K个不同字符的最长子串
- Jackknife,Bootstraping, bagging, boosting, AdaBoosting, Random forest 和 gradient boosting的区别
- python是面向对象开发_Python之面向对象
热门文章
- 工作文档化升级为工作列表化
- 自己写代码解析工具的注意事项
- 无锡公交也有两套支付
- python 读取yml文件_小白入门篇(一):Python基础之文件读取的讲解,记得收藏...
- iis mysql端口修改_如何处理IIS和Apache之间经常端口冲突
- java web 题_Java+web考试题预备
- js遍历list对象集合_Mybatis的最基本用法,遍历集合List和数组Array
- vSphere与Workstation虚拟机交互的几种方法(四)
- JDK版本更换后编译android系统出错
- ZENCART php随机调用数据库中标题和内容