<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

1029

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

最全的js面试题

Faith的博客

06-30

2899

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

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

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

09-28

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

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

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

知识点一：＜p＞标签溢出文字内容省略

最新发布

2301_80154757的博客

07-24

204

标签溢出文字内容省略

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

484

标签内容超出显示三个点

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

一位菜鸡的博客

04-14

1512

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

5239

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

927

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

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

strive for the best 的博客

05-17

733

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

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

web_long的博客

05-28

2595

单行 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多行溢出省略号的处理

06-17

259

因为-webkit-line-clamp: 2不兼容火狐或IE，采用判断浏览器的方式来启用哪个方式先判断是什么浏览器 //判断是否是谷歌浏览器 if (!stripos($_SERVER["HTTP_USER_AGENT"], 'chrome')) { $this->registerCssFile('@web/css/view.css'); } ...

html——P标签文字超出省略、首字下沉效果和两端对齐

热门推荐

肖的博客

08-12

1万+

1、P标签：块级标签居中方式：height=line-height 文字超出省略： p{ width:100px overflow:hidden; text-overflow:ellipsis; //加省略号 white-space:nowrap; //强制不换行 } text-overflow： clip 修剪文本。测试 elli...

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标签设置指定宽度，文字溢出显示 ......

程序员阿华的博客

04-16

6510

html代码： <p class="news_info">经苏州市科学技术局组织专家评审经苏州市科学技术局组织专家评审经苏州市科学技术局组织专家评审经苏州市科学技术局组织专家评审，充分体现了其技术先进性与系统创新 ......</p> css代码: .news_info { color: #898a8b; font-size: 18px; ...

css设置p标签多余文字显示省略号

追梦人生的博客

06-24

1万+

效果：<p><strong>商品名称：</strong>新鲜现摘云南绥江半边红李子甜脆脱骨李6斤当季绿色有机水果包邮</p></div>p{ display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 70...

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

stayreal_OAOA

07-26

7782

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

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

weixin_42069147的博客

06-19

6194

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

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

06-06

如果你想控制文字超出内容时的显示方式，可以使用CSS的text-overflow属性。text-overflow属性可以取以下三个值之一： 1. clip：超出内容的部分将会被剪切掉，不会显示。 2. ellipsis：超出内容的部分将会被省略号代替。 3. string：超出内容的部分将会被指定的字符串代替。例如，你可以使用以下代码将超出内容部分的文字显示为“...”： ``` .overflow { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } ``` 如果你想要多行文字溢出时的显示方式，可以使用-webkit-line-clamp属性。但是，这个属性只在WebKit浏览器中生效，如果你需要兼容Firefox和IE，可以使用一些JavaScript库来实现，比如clamp.js。以下是一个使用了clamp.js的例子： ``` <div class="clamp"> <p>多行文本溢出测试，这是第一行。</p> <p>这是第二行。</p> <p>这是第三行。</p> <p>这是第四行。</p> <p>这是第五行。</p> </div> .clamp { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 3; /* 显示的行数 */ } /* 兼容 Firefox 和 IE */ .clamp p:last-child { margin-bottom: 0; } ``` 这段代码会将文本框的高度限制在三行之内，并且超出部分会用省略号代替。同时，我们使用了-webkit-box-orient属性来设置文本的方向为垂直，-webkit-line-clamp属性来控制显示的行数。最后，我们使用了clamp.js库来兼容Firefox和IE浏览器。