CSS控制文本超出指定宽度显示省略号和文本不换行
一般的文字截断(适用于内联与块):
.text-overflow {
display:block;/*内联对象需加 */
width:31em;/* 何问起 hovertree.com */
word-break:keep-all;/* 不换行 */
white-space:nowrap;/* 不换行 */
overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ;需与overflow:hidden;一起使用。*/
}
对于表格文字溢出的定义:
对于表格超出范围显示省略号
table{
width:30em;
table-layout:fixed;/* 只有定义了表格的布局算法为fixed,下面td的定义才能起作用。 */
}
/*
何问起
hovertree.com
*/
td{
width:100%;
word-break:keep-all;/* 不换行 */
white-space:nowrap;/* 不换行 */
overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ;需与overflow:hidden;一起使用。*/
}
需要你注意的是,这个CSS样式只对单行的文字的效,如果你想把它用在多行上,也只有第一行有作用的。 这个写法只有IE会有“...”,
其它的浏览器文本超出指定宽度时会隐藏。
CSS控制文本超出指定宽度显示省略号和文本不换行的更多相关文章
- CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行
CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行. 一般的文字截断(适用于内联与块): .text-overflow { display:block;/*内联对象需加*/ ...
- 【css】 文本超出2行显示省略号
首先,要知道css的三条属性. overflow:hidden; //超出的文本隐藏 text-overflow:ellipsis; //溢出用省略号显示 white-space:nowrap; // ...
- CSS实现文本超过指定长度显示省略号
<style type="text/css"> li { width:200px;/*宽度,超过即会溢出*/ line-height:25px;/*设置行间距*/ te ...
- CSS控制TD内的文本超出指定宽度后不换行而用省略号代替
<style type="text/css"> .lineOverflow { width: 100px; border:#000 solid 1px; text-ov ...
- flutter实现文字超出最大宽度显示省略号
Container( width: 60, child: Text( '...', maxLines: 1, overflow: TextOverflow.ellipsis, ), ) 给Text外层 ...
- Table组件设置文字超出宽度显示省略号,鼠标悬停以悬浮框显示
一.设置文字超出宽度显示省略号 注意点: 1. 需要指定column的width属性,否则列头跟内容可能不对齐.需要留一列不设置宽度以适应弹性布局. 2. 列宽度width必须大于ellipsis的 ...
- CSS 单行 多行文本溢出显示省略号
单行文本 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 多行文本溢出显示省略号: <style type=&quo ...
- CSS样式 解决文字过长显示省略号问题
一.CSS样式 解决文字过长显示省略号问题 1.一般样式 一般 css 样式,当宽度不够时,可能会出现换行的效果.这样的效果在某些时候肯定是不行的,可以修改 css 样式来解决这个问题. <!D ...
- css 控制文字超出部分显示省略号
该文章转自:http://www.daqianduan.com/6179.html 如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽 ...
随机推荐
- Three Sources of a Solid Object-Oriented Design
pingback :http://java.sys-con.com/node/84633?page=0,1 Object-oriented design is like an alloy consis ...
- centos7 Linux 尝试使用crontab
一.安装crontab [root@CentOS ~]# yum install vixie-cron[root@CentOS ~]# yum install crontabs 说明:vixie-cr ...
- 【css】ie6 和 ie7 下 position 与 overflow 的问题
前几天做的项目中碰到这样一个问题,在 ie6 和 ie7 下,给父元素设置 overflow:hidden 不起作用无法隐藏,后来发现是子元素中有设置 position:relative,如果子元素删 ...
- 我的常用mixin 之 lines
/** * 最多显示 $lineCount 行 * lines * * example: * @include lines; * @include lines(3); */ @mixin lines( ...
- Cheat (tldr, bropages) - Unix命令用法备忘单
cheat 是一个Unix命令行小工具,用来查询一些常用命令的惯用法(我们都知道,man page阅读起来太累了,常常是跳到最后去看 examples,但并不是所有man pages里面都有examp ...
- 程序猿每个VPN真卡手
昨天起使用了好久好久觉得是世上最好用的poVPN貌似跑路了 刚刚续费了一年也就这样没有了,可是更多的是心疼没有好用的vpn服务. 不过查到了一个红杏chrome插件,不是vpn 如果单单上网页足够了 ...
- Xcode报错:“Your build settings specify a provisioning profile with the UUID..... however, no such provisioning profile was found”
运行环境: Xcode5 & 5.0及以上版本 对工程进行Archive打包的时候出现如下错误 问题描述: Code Sign error: No matching provisionin ...
- 给MySQL官方提交的bug report备忘
1. Bug #72215 When LOCK_plugin conflicts very much, one uninstall-audit-plugin operation crash htt ...
- MARIADB 在 OPENSUSE 的安装。
1.MARIADB 在 OPENSUSE 的安装或者升级 (参考 Setting up MariaDB Repositories ) OPENSUSE 从 12.3 版本开始,默认带有 MARI ...
- TN035: Using Multiple Resource Files and Header Files with Visual C++
TN035: Using Multiple Resource Files and Header Files with Visual C++ This note describes how the Vi ...