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

最新推荐文章于 2023-01-03 11:49:41 发布

原创最新推荐文章于 2023-01-03 11:49:41 发布 · 6.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css

java web 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一种在网页中处理过长内容的显示方法，通过使用特定的CSS样式实现文本溢出时显示省略号的效果，并确保特定元素不被隐藏。

一、需求描述

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

二、解决

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

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

</p>

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

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

朝着未来

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

最全的js面试题

Faith的博客

06-30

3001

一、单项选择(165题) 1.HTML是什么意思？ A)高级文本语言 B)超文本标记语言 C)扩展标记语言 D)图形化标记语言 2.浏览器针对于HTML文档起到了什么作用？ A)浏览器用于创建HTML文档 B)浏览器用于查看HTML文档 C)浏览器用于修改HTML文档 D)浏览器用于删除HTML文档 3.默认情况下，使用P标记会形成

Vue保姆级项目教程：十万字零基础开发信贷管理系统！

weixin_55355282的博客

03-09

1432

本文档概述了信贷管理系统的开发过程和关键需求，包括用户管理、信贷申请、贷款审批、数据分析、安全性、兼容性、扩展性和用户界面。目的是提高信贷业务的效率和准确性，满足机构对信贷业务管理的需求。

参与评论您还未登录，请先登录后发表或查看评论

p标签文字超过一定数量用...代替

09-28

p标签文字超过一定数量用...代替

查询出来的内容只显示一部分，后边用的内容进行替换

qq_35285268的博客

07-09

397

//查询出来的内容只显示十个字，后边用。。。。替换 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

610

标签内容超出显示三个点

设置＜p＞段落单行显示，溢出内容文字用“...“代替

一位菜鸡的博客

04-14

1677

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; /*宽高

7.算法——动态规划，一维,二维,分割类问题，子序列问题，背包问题，字符串问题，股票问题，练习

strive for the best 的博客

05-17

974

算法解释动态规划和其它遍历算法（如深/广度优先搜索）都是将原问题拆成多个子问题然后求解，他们之间最本质的区别是，动态规划保存子问题的解，避免重复计算。解决动态规划问题的关键是找到状态转移方程，这样我们可以通过计算和储存子问题的解来求解最终问题。同时，我们也可以对动态规划进行空间压缩，起到节省空间消耗的效果。在一些情况下，动态规划可以看成是带有状态记录（memoization）的优先搜索。状态记录的意思为，如果一个子问题在优先搜索时已经计算过一次，我们可以把它的结果储存下来，之后遍历到该子问题的时候可

前端基础CSS+html篇 2w字吐血总结

chengxuyuanlee的博客

12-30

2373

前端工程师是互联网时代软件产品研发中不可缺少的一种专业研发角色。从狭义上讲，前端工程师使用 HTML、CSS、JavaScript 等专业技能和工具将产品UI设计稿实现成网站产品，涵盖用户PC端、移动端网页，处理视觉和交互问题。从广义上来讲，所有用户终端产品与视觉和交互有关的部分，都是前端工程师的专业领域。

在牛客网答题总结的前端面试71道HTML+CSS常考题

bluedandelion的博客

05-30

4200

1、浏览器页面有哪三层构成，分别是什么，作用是什么? 构成：结构层、表示层、行为层分别是：HTML、CSS、JavaScript 作用：HTML实现页面结构，CSS完成页面的表现与风格，JavaScript实现一些客户端的功能与业务。2、HTML5的优点与缺点？优点： a、网络标准统一、HTML5本身是由W3C推荐出来的； b、多...

p标签单行文本溢出和多行文本溢出显示省略号解决方法

web_long的博客

05-28

2679

单行 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; } 看完请赏个赞 ...

jQuery教程2---隐藏p标签内容-按钮

weixin_34216196的博客

04-21

1412

<head> <title>jQuery教程2---隐藏p标签内容</title> <script src="js/jQuery.js" type="text/javascript"></script> <script type="text/javascript"> $(document)....

p标签中文字过多，导致rem单位失效。

weixin_30505485的博客

07-09

354

当p标签中文字过多时，屏幕中rem单位失效。解决办法：给p标签设置 max-height:99999px; 产生原因：foot-boosting 转载于:https://www.cnblogs.com/suanshu/p/9282244.html

p标签超出显示...

北七零度

03-13

5989

限定行数的话 display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; //需要控制的文本行数 overflow: hidden; 不限制行数，只显示一行 text-overflow: ellipsis; overflow: hidden; white-space: now...

p标签内实现第二行多余内容省略显示

qq_41831345的博客

06-09

7008

p标签需要固定宽高<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width='device-width', initial-scale=1.0"&g

p标签单行或多行超出显示省略号

weixin_42069147的博客

06-19

6378

单行省略 // 单行显示省略号 p { overflow: hidden; text-overflow:ellipsis; white-space: nowrap; } 多行省略 -webkit-line-clamp: 3; 表示超出3行显示省略号，以此类推 // 多行显示省略号，数字3为超出3行显示， p { display: -webkit-box; -webkit-box-ori...

获取p标签的内容

Programmer_FuQiang的博客

10-26

4756

<html><head><script type="text/javascript">function aa() { var obj = document.getElementById("p"); alert(obj.innerHTML); }</script></head> <body&g

改变＜p＞里的内容

qq_45772415的博客

07-14

606

<!DOCTYPE html> <html> <head> <meta charset = "utf-8"> <title>修改文本</title> </head> <p id="p1">Hello World!</p> <script> document.getElementById("p1").innerHTML= "新文本！"; </script> <p>以

获取p标签里面的内容与处理

weixin_44542146的博客

07-18

8575

撰写时间：2019.7.17 一、获取p标签里面的内容通用的一个字段类型public，然后字符串类型的string的文本字符，自定义设置字段路径FormateHandler，通过传参来进行他们之间的内容获取传递。字符串string定义声明一个值，明显的记录他获取的内容数据。 if判断来从中实现他的结果，判断获取p标签的内容，这就需要Regex正则表达式，Regex表示是一个不可变的正则表达式...

<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` 等属性共同作用。 ---