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

最新推荐文章于 2024-07-24 10:40:16 发布

朝着未来

最新推荐文章于 2024-07-24 10:40:16 发布

阅读量6.5k

点赞数

分类专栏： java web 文章标签： css

本文链接：https://blog.csdn.net/towardsfuture/article/details/48137563

版权

java web 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、需求描述

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

二、解决

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

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

</p>

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

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

朝着未来

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

HTML CSS整理笔记（建议收藏）

lin123_00的博客

04-23

1023

点击链接后退页面： <a href="javascript:history.go(-1)">回到上一个网页</a> ——修改placeholder提示的样式：我的学习交流群点击此处 1.除IE外通用写法类名或标签名::placeholder {color: red;} 2.加兼容前缀写法 css超出一行显示省略号：给定宽度(width:100px)、 ...

最全的js面试题

Faith的博客

06-30

2897

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

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

多个p标签一行展示，溢出隐藏

wang_59881的博客

06-05

574

一开始，我是让div包裹多个p标签，并让div“flex”布局，且单行溢出隐藏，可是发现当父元素或当前元素有flex时，text-overflow: ellipsis;由于我现在写的功能，p标签是v-html解析出来的，无法得知具体有多少个p标签，因此都不适用。大多数解决办法都是，不要flex，或者给div下的每个p标签单独设置样式。我想实现的功能是多个p标签一行展示，溢出div宽度时，隐藏余下内容…

09-28

2301_80154757的博客

07-24

192

标签溢出文字内容省略

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

qq_35285268的博客

07-09

368

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

weixin_47803327的博客

01-03

480

标签内容超出显示三个点

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

一位菜鸡的博客

04-14

1511

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

html+css+js基础问答

qq_43751465的博客

08-26

5209

css3 1.标签语义化顾名思义，合理的标签干合适的事情块级（display：block）：div 、p、h1~h6、hr、ul、ol、li、dl、dd、form、table、header、footer、main、nav、sector、arcitcle、pre、table、tbody、thead、th、tr、tfoot 行级（display：inline）：a、span、small、strong、em、i、code、行内块（display：inline-block）：img、input 区别： 1.

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

weixin_55355282的博客

03-09

910

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

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

strive for the best 的博客

05-17

727

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

css 控制<p>字数，超出部分显示“...”

stayreal_OAOA

07-26

7779

单行文本隐藏 p{ border: 1px solid red; width:200px; height:25px; /*word-break:break-all;*/ white-space: nowrap;/*强制在一行显示*/ text-overflow:ellipsis;/*设置超出内容显示...*/ overflow: hidden;/*一定不能少超出的内容进行隐藏*/...

p标签超出显示...

北七零度

03-13

5896

限定行数的话 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

6888

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

前端页面：当一行超过指定宽度时，多余的文字使用...

青阳的博客

09-22

6578

单行：width:90%; css：样式 width:98%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 即可实现：当文字超过两行时多余的文字使用... width:30%; /*word-wrap:break-word与word-break:break...

css文字超出部分用...代替

07-29

1761

加上title 鼠标移入依然可以显示整条数据代码结构： a标签样式： white-space: nowrap; text-overflow: ellipsis; overflow: hidden; word-break: break-all;

css设置文本超出部分用点代替

小傲哥哥的博客

04-08

1171

直接上代码：假如有一个p标签，里面写了很多文字，只要它显示两行，并且第二行超出部分用 … 表示： p{ display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; // 表示只显示两行，并且第二行超出部分显示... } 如图所示，就是最...

css控制文字超出内容显示...（-webkit-line-clamp 多行文字溢出...兼容火狐ie浏览器）...

06-06

例如，你可以使用以下代码将超出内容部分的文字显示为“...”： ``` .overflow { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } ``` 如果你想要多行文字溢出时的显示方式，可以使用-...