强制文本在一行内显示，并且后面有省略号效果

最新推荐文章于 2024-02-16 10:34:53 发布
原创 最新推荐文章于 2024-02-16 10:34:53 发布 · 1.1w 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文详细介绍了如何在网页中利用text-overflow属性、white-space和overflow属性组合实现文本溢出时显示省略号的效果，并通过实例展示了其应用方法。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

设置或检索是否使用一个省略标记（...）标示对象内文本的溢出。 对应的脚本特性为textOverflow。

<div style="width:100px;height:20px;text-overflow:ellipsis; white-space:nowrap; overflow:hidden; ">a b c d e f g h i j k l , msa sd sd sa w df f </div>

        text-overflow属性仅是注解，当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。我们想要实现溢出时产生省略号的效果。还必须定义：强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden）。只有这样才能实现溢出文本显示省略号的效果。

        一、仅定义text-overflow:ellipsis; 不能实现省略号效果。　　

        二、定义text-overflow:ellipsis; white-space:nowrap; 同样不能实现省略号效果　　

        三、同时应用： text-overflow:ellipsis; white-space:nowrap; overflow:hidden; 可实现所想要得到的溢出文本显示省略号效果：


java holder_java.sql.SQLException: connection holder is null
weixin_32760125的博客
02-16 724
错误信息2017-11-15 14:53:16.931 [ ] ERROR com.hzcf.flagship.web.AssetPlanController 126 :### Error updating database. Cause: java.sql.SQLException: connection holder is null### Cause: java.sql.SQLExcep...
Vue指令实现文字省略功能
TravelAlone的博客
07-20 1012
Vue指令实现文字省略功能
css强制显示一行
qq_25741071的博客
08-31 5276
这样，文本内容就会被强制显示在一行中，并且超出一行的部分会被隐藏起来。将上述代码应用到需要强制显示一行的元素上，例如一个。要强制将文本内容显示在一行中，可以使用CSS的。，这样超出一行的内容就会被隐藏起来。，这样文本内容就不会换行。
文本强制一行显示，多余的显示省略号
weixin_30760895的博客
05-15 500
　　做移动端的开发，总会适应各个手机的尺寸，常常会遇到标题单行显示，多余的显示省略号，这些只用css就能搞定了。 　　text-overflow 属性规定当文本溢出包含元素时发生的事情。仅仅使用这一个还不能实现想要得到的效果，想要想要的效果，还必须设置文本强制一行的显示，这是就需要white-space属性，white-space 属性设置如何处理元素内的空白，此时设置为nowrap，文本不会换...
强制文字一行显示，文本溢出用省略代替。。。
Rosia629的博客
10-20 507
文本溢出部分用省略号显示
html文本强制一行显示,css文本强制两行超出就显示省略号
weixin_39775577的博客
06-07 1806
1. 强制一行的情况很简单overflow:hidden;　　　　//超出的隐藏text-overflow:ellipsis;　　//省略号white-space:nowrap;　　//强制一行显示2. 如果要强制两行的话，得用到css3的知识overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient...
强制文本在一行内显示,并且后面有省略号效果的实现方法
09-24
要实现文本一行内显示并显示省略号，我们需要结合其他CSS属性一起使用： 1. `white-space: nowrap`：此属性阻止文本换行，确保所有文本都在同一行内显示。如果不设置此属性，文本会根据需要自动换行，这样我们就...
CSS强制文本在一行内显示若有多余字符则使用省略号表示
09-25
CSS（层叠样式表）提供了一种方法来强制文本在一行内显示，并且当文本超出容器宽度时，使用省略号（...）来表示被截断的部分。这个功能主要通过`text-overflow`属性来实现，它与`white-space`和`overflow`属性配合...
CSS自动换行、强制不换行、强制断行、超出显示省略号
09-27
2. **强制不换行**：如果你希望文本在一行内完全显示，即使内容超出了元素的宽度，可以使用`white-space: nowrap`。这通常用于创建无断行的标题或者连续的链接列表。 3. **强制断行**：有时，长单词或URL可能会导致...
CSS进阶知识：溢出的文字省略号显示，单行文本溢出显示省略号，多行文本溢出显示省略号（存在兼容性问题）
我就知道你会来，我们一起进步吧！
02-16 782
单行文本溢出显示省略号--必须满足三个条件。3.文字用省略号代替超出的部分。1.强制一行显示文本。2..超出的部分隐藏。
css 常见样式
LiBo
08-25 463
/* 1、得是以配置为inline-block的元素，或默认以block呈现的div、p元素 2、强制不换行 3、固定宽度 4、超出部分隐藏 5、超出部分以'...'结尾 */ .test { border:1px solid #000000; display: inline-block; white-space: nowrap; width: 140px; overf...
解决mysql中数据库连接connection holder is null的问题
爱吃鸡腿的明仔
01-30 4907
一。问题 频繁查询或者更新数据库时，出现以下问题报错： Cause: java.sql.SQLException: connection holder is null 二。解决方法 在application.xml配置文件中加入以下配置： spring: datasource: # 配置间隔多久才进行一次检测，检测需要关闭的空闲连接，单位是毫秒 timeBetweenEvictionRunsMillis: 60000 #是否自动回收超时连接 removeAbandone
关于connection holder is null的个人解决方案实践
savanah_heat的博客
12-05 1万+
由于公司需要标准化项目,规范jdk,tomcat等version, 版本规范：6.x --&gt; 7.0.90 版本规范：jdk1.6.x -- &gt;jdk1.8.0_181 版本规范：spring3.x -- &gt;spring-4.3.7 项目中使用了hibernate3.x,和规范后的jdk1.8不兼容,导致需要升级hibernate的版本,目前升级版本至 &lt;grou...
关于Druid连接池控制事务出现connection holder is null异常
wd402922965的博客
07-27 2855
Druid及ThreadLocal控制事务时出现的异常
connection holder is null
世界这么大
07-20 1341
Caused by: java.sql.SQLException: connection holder is null
connection holder is null新增解决方案（2018-06-02）
程序员小跃的专栏
06-02 4396
最近在做Java后台的项目，用到了druid数据库连接池，阿里出品，肯定是精品的意思咯，这也是我们老大搭建的框架，我就站在前人的肩膀上飞翔了。先前在一个事物里，使用了多条数据库操作，都是正常的，但是前天出了问题，一直报java.sql.SQLException: connection holder is null 异常，很是苦恼。 因为有科学上网，首先用的是Google，但是这个是阿里出品，国人...
java.sql.SQLException: connection holder is null
huo_Echo的博客
04-01 4791
终于解决了！java.sql.SQLException: connection holder is null
Caused by: java.sql.SQLException: connection holder is null
热门推荐
随便起个不重复的名字
10-25 2万+
使用阿里巴巴的druid连接池报错：Caused by: java.sql.SQLException: connection holder is null 解决方案： 把连接池配置中的removeAbandonedTimeout参数调整为30分钟，如下：
关于报错connection holder is null
aaa45646的博客
09-03 2283
关于报错connection holder is null 在练习使用jsp过程中 package com.cjh.dao.impl; import com.cjh.pojo.User; import com.cjh.utils.JdbcUtils; import com.sun.tracing.dtrace.ArgsAttributes; import org.apache.commons.dbutils.QueryRunner; import org.apache.commons.dbutils.ha
css 实现文本一行展示，超出部分省略号显示
最新发布
07-09
<think>我们正在讨论CSS单行文本溢出显示省略号的问题。根据引用内容，特别是引用[1]和引用[3]提供了关键信息。 关键点： 1. 设置固定宽度（width） 2. 强制文本在一行显示（white-space: nowrap） 3. 隐藏溢出内容（overflow: hidden） 4. 使用省略号表示被修剪的文本（text-overflow: ellipsis） 引用[3]提供了一个完整的例子： ```css P { color: cornflowerblue; width:200px; height:100px; border:1px solid #349910; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } ``` 注意：在这个例子中，虽然设置了高度，但对于单行文本，我们通常不需要设置高度（或者设置行高即可），因为单行文本溢出省略号通常与行高配合使用，但高度不是必须的，因为单行文本的高度可以由行高决定。不过，如果容器高度大于行高，省略号仍然会显示在底部。所以，为了确保单行效果，我们可以不设置高度，或者设置一个合适的高度（比如等于行高）。 另外，引用[1]中提到了另一种方法（.overflow-ellipsis.first）使用了direction: rtl，这是为了从右向左的文本，通常我们不需要，除非处理特定语言。 因此，标准的单行文本溢出显示省略号的CSS如下： ```css .ellipsis { width: 200px; /* 或者任意固定宽度，也可以使用max-width */ white-space: nowrap; /* 禁止换行 */ overflow: hidden; /* 隐藏溢出部分 */ text-overflow: ellipsis; /* 显示省略号 */ } ``` 注意：这个设置需要块级元素或者设置为块级显示（display: block; 或 display: inline-block;）。 如果元素是内联元素（如span），需要设置display为inline-block或block。 示例HTML： ```html <div class="ellipsis">这是一段很长很长的文本，当它超出宽度时会显示省略号</div> ``` 或者： ```html <span class="ellipsis" style="display: inline-block;">这是一段很长很长的文本，当它超出宽度时会显示省略号</span> ``` 引用[2]是关于多行文本溢出显示省略号的方法（使用-webkit-line-clamp），但用户要求的是单行，所以这里不展开。 引用[4]是关于文本阴影的，与当前问题无关。 因此，我们给出单行文本溢出显示省略号的解决方案。 相关问题： 1. 如何实现多行文本溢出显示省略号？ 2. 为什么设置了text-overflow:ellipsis却没有显示省略号？ 3. 如何实现从左向右的文本溢出省略号（对于从右向左的文本）？</think>### CSS单行文本溢出显示省略号实现方法 要实现单行文本溢出显示省略号效果，需要使用以下CSS属性组合： ```css .ellipsis { width: 200px; /* 设置固定宽度 */ white-space: nowrap; /* 禁止文本换行 */ overflow: hidden; /* 隐藏溢出内容 */ text-overflow: ellipsis; /* 溢出部分显示省略号 */ } ``` #### 关键属性说明： 1. **`width`** 必须设置固定宽度（或max-width），否则无法判断溢出边界 2. **`white-space: nowrap`** 强制文本保持单行显示[^1] 3. **`overflow: hidden`** 隐藏超出容器范围的内容 4. **`text-overflow: ellipsis`** 在文本溢出位置显示省略符号`...`[^3] #### 完整示例： ```html <!DOCTYPE html> <html> <head> <style> .overflow-ellipsis { width: 250px; border: 1px solid #ccc; padding: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } </style> </head> <body> <div class="overflow-ellipsis"> 这是一段非常长的单行文本内容，超出容器宽度的部分将显示为省略号... </div> </body> </html> ``` #### 注意事项： - 仅适用于**块级元素**（如div/p），行内元素需添加`display: block`或`display: inline-block` - 父容器不能有`padding`挤压内容空间（必要时可设置`box-sizing: border-box`） - 在表格单元格中使用时需添加`table-layout: fixed`[^2] 实际效果： ![单行文本溢出效果](https://via.placeholder.com/250x50/fff?text=这是一段非常长的单行文本...)
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值