CSS控制文本超出指定宽度显示省略号和文本不换行

一般的文字截断(适用于内联与块):.text-overflow{display:block;/*内联对象需加*/width:31em;/*何问起hovertree.com*/word

大家好,又见面了,我是全栈君,今天给大家准备了Idea注册码。

一般的文字截断(适用于内联与块):

.text-overflow {
    display:block;/*内联对象需加 */
    width:31em;/* 何问起 hovertree.com */
    word-break:keep-all;/* 不换行 */
    white-space:nowrap;/* 不换行 */
    overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
    text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ;需与overflow:hidden;一起使用。*/
}

对于表格文字溢出的定义:

对于表格超出范围显示省略号

 1 table{
 2     width:30em;
 3     table-layout:fixed;/* 只有定义了表格的布局算法为fixed,下面td的定义才能起作用。 */
 4 }
 5 /*
 6 何问起
 7 hovertree.com
 8 */
 9 td{
10     width:100%;
11     word-break:keep-all;/* 不换行 */
12     white-space:nowrap;/* 不换行 */
13     overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
14     text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ;需与overflow:hidden;一起使用。*/
15 }

需要你注意的是,这个CSS样式只对单行的文字的效,如果你想把它用在多行上,也只有第一行有作用的。 这个写法只有IE会有“…”,

其它的浏览器文本超出指定宽度时会隐藏。

特效:http://www.cnblogs.com/roucheng/p/texiao.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/120574.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • Maven–如何下载JSONObject相关依赖架包

    Maven–如何下载JSONObject相关依赖架包一、开发场景Java开发当中经常需要Json格式的数据,这就用到JSONObject类,本文章只提供以下两种JSONObject对应架包的下载方式。com.alibaba.fastjson.JSONObject(依赖1个架包fastjson-1.2.28.jar)net.sf.json.JSONObject(依赖6个架包commons-beanutils-1.9.3.jar、commons-c…

    2022年7月12日
    66
  • Command – 命令模式

    Command – 命令模式

    2021年12月10日
    46
  • 视频编码的常见参数基本概念 –bit rate / frame rate /sample rate等等

    视频编码的常见参数基本概念 –bit rate / frame rate /sample rate等等码率:Bit Rate,指视频或音频文件在单位时间内使用的数据流量,该参数的单位通常是Kbps,也就是千比特每秒。通常2000kbps~3000kbps就已经足以将画质效果表现到极致了。码率参数与视频文件最终体积大小有直接性的关系。  混合码率:Overall Bit Rate,指视频文件中视频和音频混合后的整体平均码率。一般描述一个视频文件的码率都是指OBR,如新浪播客允许的OBR上

    2022年10月9日
    3
  • ftp 发生意外错误 0x8ffe2740

    ftp 发生意外错误 0x8ffe2740一般是由端口被占用造成的可以修改端口号解决转载于:https://www.cnblogs.com/xyangs/archive/2012/06/18/2553231.html

    2022年7月26日
    11
  • 链路层链路发现协议(LLDP)讲解「建议收藏」

    链路层链路发现协议(LLDP)讲解「建议收藏」一、LLDP协议概述 随着网络技术的发展,接入网络的设备的种类越来越多,配置越来越复杂,来自不同设备厂商的设备也往往会增加自己特有的功能,这就导致在一个网络中往往会有很多具有不同特性的、来自不同厂商的设备,为了方便对这样的网络进行管理,就需要使得不同厂商的设备能够在网络中相互发现并交互各自的系统及配置信息。 LLDP(LinkLayerDiscoveryProtocol,链路层发现协

    2022年5月5日
    43
  • SQL查询左连接、右连接、内连接[通俗易懂]

    1、左连接的定义:是以左表为基础,根据ON后给出的两表的条件将两表连接起来。结果会将左表所有的查询信息列出,而右表只列出ON后条件与左表满足的部分。左连接全称为左外连接,是外连接的一种。下边以A表和B表为例子,A、B之间的左连接条件为:ano=bno;查询语句为:SELECT*FROM`A`LEFTJOINB ONano=bno;eg1:A表中的只有1条记录,B表中2条记录…

    2022年4月5日
    125

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号