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

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

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

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 数字电路实验 05 – | 触发器及其应用[通俗易懂]

    数字电路实验 05 – | 触发器及其应用[通俗易懂]一、实验目的和任务掌握基本RS、JK、T和D触发器的逻辑功能。 掌握集成触发器的功能和使用方法。 熟悉触发器之间相互转换的方法。二、实验原理介绍触发器是能够存储1位二进制码的逻辑电路,它有两个互补输出端,其输出状态不仅与输入有关,而且还与原先的输出状态有关。触发器有两个稳定状态,用以表示逻辑状态“1”和“0”,在一定的外界信号作用下,可以从一个稳定状态翻转到另一个稳定状态,它是一个具有记忆功能的二进制信息存储器件,是构成各种时序电路的最基本逻辑单元。三、实验数据、计

  • kafka与rocketmq优劣势_kafka rocketmq rabbitmq

    kafka与rocketmq优劣势_kafka rocketmq rabbitmq前言:公司采用了两种消息队列,一种是阿里云的rocketMQ,一种是kafka.分别用在了两种不同的场景.这里做个记录.rocketMQ使用场景:1.异步解耦:拿我们的项目举例,有一个场景,是需要pc端触发派单接口,然后发送给app端消息通知.此时要求能够做到每个app都能收到消息,但是又希望这个发送的过程尽量的短,也就是派单接口尽量快.那么这个派送的过程可以采用rocketM…

  • Redis学习之Redis配置文件详解[通俗易懂]

    Redis学习之Redis配置文件详解[通俗易懂]Redis配置文件详解redis.conf文件,我们启动redis的时候就是通过这个配置文件单位配置文件unit单位对大小写不敏感包含include就是启动的时候可以包含其他的配置文件,就好比学习jsp的include静态包含网络networkbind127.0.0.1#绑定的ip,允许指定的rdis客户端才能连接protectedyes#开启保护模式port6379#端口通用generaldaemonizeyes#默认是no,改为y

  • Hadoop伪分布式安装_伪分布式安装

    Hadoop伪分布式安装_伪分布式安装Hadoop 伪分布式安装部署

  • Laravel Form-builder使用

    Laravel Form-builder使用

    2021年10月21日
  • SDUTOJ 2128 树结构练习——排序二叉树的中序遍历[通俗易懂]

    SDUTOJ 2128 树结构练习——排序二叉树的中序遍历

发表回复

您的电子邮箱地址不会被公开。

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