<p>内容溢出文字用"..."代替,且内容某部分内容必须显示在同行后面

最新推荐文章于 2023-01-03 11:49:41 发布
最新推荐文章于 2023-01-03 11:49:41 发布
阅读量6.6k 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： java web 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/towardsfuture/article/details/48137563
本文介绍了一种在网页中处理过长内容的显示方法，通过使用特定的CSS样式实现文本溢出时显示省略号的效果，并确保特定元素不被隐藏。

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

一、需求描述

<p>我是内容，如果我过长请将我多余的内容隐藏并显示省略号<a>我不能被隐藏</a><p>


二、解决

<p style="width:200px; text-overflow:ellipsis;  white-space:nowrap;   overflow:hidden;">

<a style="float:right">我不能被隐藏</a>

我是内容，如果我过长请将我多余的内容隐藏并显示省略号

</p>

注：必须将<a>放在<p>内容的前面，放在后面会自动换行

【LeetCode刷题笔记】DFS&BFS（一）
川峰的博客
11-22 1140
LeetCode刷题笔记之DFS&BFS篇。
Vue保姆级项目教程：十万字零基础开发信贷管理系统！
weixin_55355282的博客
03-09 1318
本文档概述了信贷管理系统的开发过程和关键需求，包括用户管理、信贷申请、贷款审批、数据分析、安全性、兼容性、扩展性和用户界面。目的是提高信贷业务的效率和准确性，满足机构对信贷业务管理的需求。
p标签文字超过一定数量用...代替
09-28
p标签文字超过一定数量用...代替
查询出来的内容只显示一部分，后边用的内容进行替换
qq_35285268的博客
07-09 387
//查询出来的内容只显示十个字，后边用。。。。替换     foreach($sel as $key=>$v){         //先截取前十条 mb_substrr()防止乱码和设置占位         $ss=mb_substr($v['nei'],0,10,"utf-8");         //替换剩下的         $vv=str_replace($v['nei'],11
css 实现文字过长自动隐藏功能
12-14
单行 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 多行(兼容各个浏览器)//通过覆盖最后几个字的形式 p{ position:relative; line-height:1.4em; height:4.2em;/* 3 倍line-height 多少倍就是多少行*/ overflow:hidden; } .p::after { content:"..."; font-weight:bold; position:absolute; bottom:0; right:0; padding:0 20px 1px
＜p＞标签内容超出显示三个点
大樊子的博客
01-03 588
标签内容超出显示三个点
设置＜p＞段落单行显示，溢出内容文字用“...“代替
一位菜鸡的博客
04-14 1635
1、显示位置 <section> <div id="box"> <p class="c-999 f-fA" v-html="article.description">{{article.description}}</p> </div> </section> 2、对p标签进行样式修改 <style> #box p { /* 设置宽高可以解决显示两个省略号的问题*/ width: 620px; /*宽高
最全的js面试题
Faith的博客
06-30 2967
一、单项选择(165题) 1.HTML是什么意思？ A)高级文本语言 B)超文本标记语言 C)扩展标记语言 D)图形化标记语言 2.浏览器针对于HTML文档起到了什么作用？ A)浏览器用于创建HTML文档 B)浏览器用于查看HTML文档 C)浏览器用于修改HTML文档 D)浏览器用于删除HTML文档 3.默认情况下，使用P标记会形成
7.算法——动态规划，一维,二维,分割类问题，子序列问题，背包问题，字符串问题，股票问题，练习
strive for the best 的博客
05-17 930
算法解释 动态规划和其它遍历算法（如深/广度优先搜索）都是将原问题拆成多个子问题然后求解，他们之间最本质的区别是，动态规划保存子问题的解，避免重复计算。 解决动态规划问题的关键是找到状态转移方程，这样我们可以通过计算和储存子问题的解来求解最终问题。 同时，我们也可以对动态规划进行空间压缩，起到节省空间消耗的效果。 在一些情况下，动态规划可以看成是带有状态记录（memoization）的优先搜索。状态记录的意思为，如果一个子问题在优先搜索时已经计算过一次，我们可以把它的结果储存下来，之后遍历到该子问题的时候可
前端基础CSS+html篇 2w字吐血总结
chengxuyuanlee的博客
12-30 2172
前端工程师是互联网时代软件产品研发中不可缺少的一种专业研发角色。从狭义上讲，前端工程师使用 HTML、CSS、JavaScript 等专业技能和工具将产品UI设计稿实现成网站产品，涵盖用户PC端、移动端网页，处理视觉和交互问题。从广义上来讲，所有用户终端产品与视觉和交互有关的部分，都是前端工程师的专业领域。
p标签单行文本溢出和多行文本溢出显示省略号解决方法
web_long的博客
05-28 2658
单行 p { overflow: hidden; text-overflow:ellipsis; white-space: nowrap; } 多行 // 多行显示省略号，数字3为超出3行显示， p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } 看完请赏个赞 ...
p标签超出显示...
北七零度
03-13 5970
限定行数的话 display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; //需要控制的文本行数 overflow: hidden; 不限制行数，只显示一行 text-overflow: ellipsis; overflow: hidden; white-space: now...
p标签设置行数，超出部分用省略号隐藏
qq_38482205的博客
09-10 2133
width: 50%; overflow: hidden; text-overflow:ellipsis; -webkit-line-clamp: 2; word-wrap: break-word; display: -webkit-box; -webkit-box-orient: vertical; line-height: 20px; ...
p标签内实现第二行多余内容省略显示
qq_41831345的博客
06-09 6985
p标签需要固定宽高&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt;&lt;meta charset="UTF-8"&gt;&lt;meta name="viewport" content="width='device-width', initial-scale=1.0"&g
css内容过长显示省略号的几种解决方法
p15097962069的博客
11-01 217
css内容过长显示省略号的几种解决方法
设置<td></td>或<th></th>内容不换行，超出部分隐藏并用省略号代替无效时解决办法
滴滴滴的博客
12-27 2340
今天给一个td设置当内容过长，不换行隐藏超出部分内容时，死活设置不成。后来发现因为给table少加了一个属性table-layout: fixed;允许给td/th设置宽度。默认值为 table-layout: automatic 默认每一列列宽均分，不可设置列宽。 &lt;td&gt;&lt;/td&gt;中做如下设置： white-space: nowrap;/*控制单行显示*/ ove...
span实现前台文字显示字数，当多于一定数量时，用...代替
热门推荐
u010320215的博客
03-29 1万+
span实现前台文字显示字数，当多于一定数量时，用...代替 可以通过jquery设置： 效果： jquey方法：（当文字大于15替换...）  $('.table_block p span').each(function() {         var words = $(this).text().lengt
文字超出内容部分用...隐藏
大大大鸡腿的博客
08-13 1051
单行 网上说的方法也大多都是这种的，用css的text-overflow属性 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> &
textView显示的字体过长时，后面显示...省略号
wsh51886的专栏
07-24 3002
有时候textview显示的内容过长，我们需要截取成固定长度的字符，然后后面用省略号代替，该怎么实现呢？ 我的办法有两种： 1、在布局文件中设置android:layout_width="固定长度:Xdip"                                       android:singleLine="true" 2.android:singleLine="true"
<p>溢出隐藏
最新发布
04-23
### CSS 中 `overflow: hidden` 的使用方法 CSS 属性 `overflow` 定义了当内容超出其容器边界时的行为方式。通过设置 `overflow: hidden`，可以隐藏任何溢出的内容，并防止它们显示在容器外部。 #### 基本语法 ```css selector { overflow: hidden; } ``` 如果希望仅针对某个方向处理溢出，则可以通过以下属性单独定义： - `overflow-x`: 针对水平方向的溢出行为。 - `overflow-y`: 针对垂直方向的溢出行为。 例如： ```css selector { overflow-x: hidden; overflow-y: visible; } ``` #### 解决外边距塌陷问题 在外边距塌陷的情况下，子元素的顶部或底部外边距会穿透父级元素的边界[^1]。此时，可以在父级元素上应用 `overflow: hidden` 来阻止这种现象的发生。具体实现如下： ```html <style> .box { background: skyblue; overflow: hidden; /* 解决外边距塌陷 */ } .kid { width: 100px; height: 100px; background: yellow; margin-top: 20px; } </style> <div class="box"> <div class="kid">子元素1</div> </div> ``` 在此示例中，`.box` 是父级元素，而 `.kid` 是具有外边距的子元素。由于设置了 `overflow: hidden`，父级元素不会因为子元素的外边距而发生塌陷[^1]。 #### 单行文本溢出省略号的应用 对于单行文本溢出的情况，通常需要结合多个 CSS 属性来实现省略效果。以下是具体的解决方案[^2]： ```css .content p { height: 40px; /* 设置固定高度 */ line-height: 40px; /* 行高与高度一致 */ overflow: hidden; /* 隐藏多余部分 */ white-space: nowrap; /* 不允许换行 */ text-overflow: ellipsis; /* 添加省略号 */ font-size: 14px; /* 字体大小 */ text-align: center; /* 文字居中 */ } ``` 完整的 HTML 和 CSS 结构如下所示： ```html <style> .content { height: 40px; line-height: 40px; overflow: hidden; display: flex; font-size: 14px; } .content p { height: 40px; /* 后续补充此属性以修复潜在布局问题 */ width: 150px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: center; } </style> <body> <div class="content"> <p>这是一段很长的文字用于测试单行文本溢出的效果。</p> </div> </body> ``` 在这个例子中，文字长度超过指定宽度的部分会被截断并替换为省略号[^2]。 --- ### 总结 - 使用 `overflow: hidden` 可有效隐藏溢出内容。 - 对于外边距塌陷问题，可通过为父级元素添加 `overflow: hidden` 进行解决。 - 实现单行文本溢出省略号需配合 `white-space`, `text-overflow` 等属性共同作用。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值