CSS 文本溢出处理

最新推荐文章于 2024-08-22 11:20:46 发布

不经寒彻骨哪得梅花香

最新推荐文章于 2024-08-22 11:20:46 发布

阅读量210

点赞数

分类专栏：有关CSS

本文链接：https://blog.csdn.net/YBZ_CSDN/article/details/107850278

版权

有关CSS 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1、单行文本
三件套实现溢出：

white-space:nowrap;  //不折行
overflow: hidden;   // 隐藏
text-overflow: ellipsis;  // 省略号

2、多行文本
CSS前端实现不了溢出省略号显示，只能通过后台控制，CSS3有这种技术实现，但是主要针对移动端，PC端很多老版本浏览器支持不好。所以PC端多行文本不显示省略号，直接折行溢出隐藏。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

不经寒彻骨哪得梅花香

关注关注

0
点赞
踩
0

收藏

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

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

面试官：如何实现单行／多行文本溢出的省略样式？

m0_50125215的博客

04-22

659

1.文本的溢出在日常开发展示页面，如果一段文本的数量过长，受制于元素宽度的因素，有可能不能完全显示，为了提高用户的使用体验，这个时候就需要我们把溢出的文本显示成省略号分成两种形式：单行文本溢出多行文本溢出 2.实现方式 2.1单行文本溢出省略理解也很简单，即文本在一行内显示，超出部分以省略号的形式展现实现方式也很简单，涉及的css属性有： text-overflow：规定当文本溢出时，显示省略符号来代表被修剪的文本 white-space：设置文字在一行显示，不能换行 overflow：.

CSS--文本溢出的处理

Qian_mos的博客

12-24

1723

1.单行文本溢出单行文本溢出一般没有代码上的兼容问题， //需要对元素盒子设置一个宽度以兼容部分浏览器 overflow: hidden; //超出部分隐藏 white-space: nowrap; //表示不换行 text-overflow: ellipsis; //加省略号 2.多行文本溢出适用于webkit浏览器（如chrome、QQ极速、搜狗等）和移动端。 displa...

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

css关于文本溢出

qq_43682422的博客

10-17

5451

值得注意的是，只有当dispaly:-webkit-box 且-webkit-box-orient: vertical;Two-value syntax 表示两行语法,text-overflow是支持传入两个值的，如: text-overflow: clip clip;截断边缘处需要放省略号，它有固定宽度，当判断显示的内容不够显示省略号时，会把整个单词都隐藏，否则单词会被截断部分显示省略。当传入两个值的时候，第一个值表示左边超出部分的省略，第二个值表示右边超出的省略。省略边缘单词的长短可能会影响省略效果。

CSS实现文本溢出处理

qq_51667621的博客

07-25

745

/margin;padding;box-sizing;margin;padding;/* 两端对齐 */text-align;;border;/* --------- 单行文本溢出处理 ----------- *//* 不换行 */;/* 隐藏超出部分 */overflow;/* 未显示部分用省略号代替 */;

css文本溢出

微风的博客

01-24

290

单行-------先给这行文字设置固定的宽度 .word { width: 128px; overflow: hidden; //盒子溢出隐藏 text-overflow: ellipsis; //文字溢出显示省略号 white-space: nowrap; //文字不换行 } 多行-------- .word{ display: -webkit-box !important; overflow:hidden; text-overflew:el.

CSS 文本溢出处理（单行和多行）

http____的博客

12-18

1356

文章目录1 单行文本2 多行文本溢出 1 单行文本 html： <span>单行文本溢出处理</span> css： span{ display: inline-block; width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } span{ border: 1px solid black; } 效果图：注意：要配合width属性使

css实现文本溢出显示省略号

01-19

复制代码代码如下:<!...<head><meta charset=”UTF-8″>...当文本对象溢出是显示…，当然也可是设置属性为clip不显示点点点；-o-text-overflow:为了兼容opera浏览器;*/width:200px;overflow:hidd

纯CSS实现“文本溢出截断省略”的几种方法

01-08

在我们的日常开发工作中，文本溢出截断省略是很常见的一种需考虑的业务场景细节。看上去 “稀松平常” ，但在实现上却有不同的区分，是单行截断还是多行截断？多行的截断判断是基于行数还是基于高度？这些问题之下，...

CSS--文本溢出完美样式

02-25

CSS--文本溢出完美样式，CSS--文本溢出完美样式，CSS--文本溢出完美样式

CSS控制html文本溢出

01-14

<title>CSS控制文本溢出_网页特效_javascript特效_css特效-ViewCss网页特效网</title> <meta name="Keywords" content="CSS控制文本溢出_网页特效,javascript特效,css特效,网页特效代码,网站制作" /> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style> div { text-overflow:ellipsis; overflow:hidden; white-space:nowrap; font-size:36px; width:400px; } p { text-overflow:ellipsis; overflow:visible; white-space:nowrap; font-size:36px; width:400px; } </style> </head> <body> <h1 style="font-size: 14px; color: Red"> CSS控制文本溢出</h1> <div> 这是一个关于文本溢出属性的实例。</div> <p> 这是一个关于文本溢出属性的实例。</p> <div style="font-size: 14px; line-height: 30px; clear: both"> 本特效由<a href="http://www.viewcss.com" target="_blank">ViewCss网页特效网</a>收集和整理,请支持原创精神,转载请注明出处!</div> </body>

【CSS】文字溢出问题 ( 强制文本在一行中显示 | 隐藏文本的超出部分 | 使用省略号代替文本超出部分 )

让学习成为一种习惯 ( 韩曙亮の技术博客 )

04-16

3598

一、文字溢出问题二、文字溢出处理方案三、代码示例

CSS 文本内容溢出解决方法

清湮沐的博客

03-31

905

1：文本溢出强制换行 display: -webkit-box; -webkit-line-clamp: 2; //2行 .title{ width:150px; overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-bo

【前端知识之CSS】文本溢出

weixin_44337386的博客

05-17

435

本系列主要整理前端面试中需要掌握的知识点。本节介绍单行和多行文本溢出的处理方式。

css 解决文本溢出问题

weixin_39228870的博客

01-03

316

单行文本溢出字数过多超过盒子时，以"…"形式显示 p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; /* 不换行设置如何处理元素内的空白*/ } text-overflow 规定当文本溢出包含元素时发生的事情：值为clip 表示修剪文本值为ellipsis 表示以省略号显示值为" " 表示以...

CSS 单行、多行文本溢出处理，纯css实现文本展开 / 收起