纯css设置文字溢出隐藏并显示省略号

最新推荐文章于 2024-10-02 09:25:25 发布

原创最新推荐文章于 2024-10-02 09:25:25 发布 · 189 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

前端开发

当前文章被收录于：

前端开发

58 篇文章 0 人学习

订阅专栏查看详情

css

当前文章被收录于：

css

15 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

本文介绍了一种使用CSS实现文字溢出时显示省略号的方法，通过设置特定属性，可以有效地控制文本在超出容器宽度时的表现形式。

css代码：

/* 文字溢出隐藏并显示省略号 */
text{
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp:2; /* 设置行数 */
	-webkit-box-orient:vertical;
}

效果：
在这里插入图片描述

标签

#css3

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

得知此事须躬行

关注关注

0
点赞
踩
0

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

css 溢出隐藏显示省略号

最新发布

XYX8958的博客

11-15

3535

限制在一个块元素显示的文本的行数。CSS3引入了-webkit-line-clamp。属性，这是一个非标准的属性，需要结合。：设置弹性盒子的方向为垂直。：在文本溢出时显示省略号。以隐藏超出容器的内容。：隐藏超出容器的部分。

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

CSS实现文本超出隐藏并显示省略号

everfoot的博客

10-02

3456

通过结合使用和这三个CSS属性，我们可以轻松地在CSS中实现文本超出隐藏并显示省略号的效果。这一技巧在处理长文本、保持页面整洁和美观方面非常有用。希望本文的介绍和示例能帮助你更好地理解和应用这一技术。

CSS溢出的文字省略号显示

月光晒了很凉快的博客

07-21

8840

/*1.这个单词的意思是，如果文字显示不开，也必须强制在一行显示*//*这个单词的意思是，如果文字显示不开，自动换行*//*5.设置或检索伸缩盒对象的子元素的排列方式*//*4.限制在一个块元素显示的文本的行数*//*3.文字溢出的时候用省略号来显示*//*2.文字用省略号替代超出的部分*//*2.溢出的部分隐藏起来*//*1.超出的部分隐藏*/......

div内文字的溢出部分用省略号显示

小柠檬爱编程

06-05

7972

一：通过CSS控制显示 div内显示一行，超出部分用省略号显示 div内显示多行，超出部分用省略号显示 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>例子</title> <style> /* 单行文字末尾省略号显示 */ .div1{

CSS文本溢出显示省略号

weixin_43294092的博客

05-28

3837

CSS文本溢出显示省略号 项目中常常有这种需要我们对溢出文本进行"…"显示的操作，单行多行的情况都有（具体几行得看设计师心情了），这篇随笔是我个人对这种情况解决办法的归纳，欢迎各路英雄指教。单行语法 overflow:hidden; text-overflow:ellipsis; white-space:nowrap 示例文本溢出显示省略号,文本溢出显示省略号…… 多行 1.直接用css属性设置(只有-webkit内核才有作用) 语法 overflow: hidden; text-ov

css设置文字溢出省略号显示

阿牛的博客

02-18

1799

css设置文字溢出省略号显示，包括单行文字溢出省略号显示和多行文字溢出省略号显示。

CSS 设置文字只显示一行，多余显示省略号

热门推荐

轻风细雨_林木木

05-10

11万+

【代码】CSS 设置文字只显示一行，多余显示省略号。

css实现文字超出隐藏并显示省略号

艺术编程

10-26

4177

单行实现文本溢出显示省略号： span{ white-space: nowrap; /*超出的空白区域不换行*/ overflow: hidden; /*超出隐藏*/ text-overflow: ellipsis; /*文本超出显示省略号*/ } 双行实现文本溢出显示省略号： span{ display: -webkit-box; /*将对象转为弹性盒模型展示*/ -webkit-box-orient:

纯js实现多行文本溢出隐藏并显示省略号

weixin_42844590的博客

07-28

1874

使用html2canvas生成图片时，用css控制超出行数隐藏并显示省略号无效，可以通过js实现。

【小技巧】CSS如何实现文字溢出显示省略号

qq_65034569的博客

08-03

2289

是一种常见的文本截断技术，用于在文本内容超出其容器宽度时，提供一种视觉上的提示，表明文本已被截断。在列表项或者导航菜单中，经常会在列表项或导航菜单中，由于空间有限，当文本内容较长时，可以使用省略号显示文本已被截断。这个方法很多地方都会用到，我们可以直接复制下来，写在一个公共样式当中，下次直接使用类名即可(当然，文字省略了之后，也要得找个时机让他的文字完全显示的做法，只需要设置一个。方法非常简单，只需要添加以下👇三句话就可以实现啦🥳！伪类，让鼠标经过的时候显示全。设置不允许换行，强制文字一行显示。

css文本溢出时候，如何把多余的文字显示省略号

Tender的博客

08-03

1486

css文本溢出时候，如何把多余的文字显示省略号 日常做的项目中常常有这种需要我们对溢出文本进行"…"显示的操作（我也是通过一行文字到下一行，破坏了我的布局，所以才去找各种办法，然后做了总结），单行多行的情况都有，以下就是解决的办法，如有不合适的直接联系作者，我看到之后会回复你的。单行代码： overflow:hidden; text-overflow:ellipsis; white-space:nowrap 示例：在自己的css中设置的代码： h1, h2, h3, h4, h5, h6

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

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

04-16

4566

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

CSS 如何实现文字溢出隐藏时，隐藏左边或者右边，并显示省略号

qq_37866866的博客

05-25

2050

CSS 如何实现文字溢出隐藏时，隐藏左边或者右边，并显示省略号 指定一个定宽高的盒子，当文字溢出，会换行显示出来。 .box { width: 60px; height: 30px; background-color: #ff000020; } 当限制文字不换行后，会在一行超出显示出来。 .box { width: 168px; height: 30px; background-color: #ff000020; white-space: nowrap; } 添加溢出隐藏，则会自动隐藏

CSS实现文本溢出省略号或完整显示

码农研究僧的博客

09-19

2997

文本内容超出容器宽度的问题，为了保持页面布局的整洁，通常会使用省略号来隐藏多余的内容一共有两种方式：设定省略号 完整展示

CSS——div内文字的溢出部分用省略号显示

aiyizou6070的博客

09-10

1455

使得div内文字的溢出部分用省略号显示，可归纳为两种解决办法，一种方法是用CSS解决，另一种方法是js解决。一、通过CSS控制显示 div内显示一行，超出部分用省略号显示 div内显示多行，超出部分用省略号显示代码： <!DOCTYPE html> <html> <head> <meta chars...

文字溢出隐藏显示省略号

不争气争口馒头

10-03

1万+

css实现单行溢出隐藏 css代码 /* 溢出隐藏 */ overflow: hidden; /* 显示省略号 */ text-overflow: ellipsis; /* 不换行 */ white-space: nowrap; js实现多行溢出隐藏 jsp页面 <dd class="user_star_dd"><p&gt...

css换行文字隐藏,css 文本换行文本溢出隐藏用省略号表示剩下内容

weixin_28717683的博客

08-03

729

正常文本的显示p{width: 300px;box-shadow: 0 0 10px #ccc;padding: 0 20px;margin: 20px 100px;}手指轻轻敲打着键盘，一句句，一行行，一段段，敲得都是些牵挂，都是些痴缠，是不是因为封存在心底的那抹温柔，还没泯灭，才会一次次敲下这些落寞的字迹。强制不换行p{width: 300px;box-shadow: 0 0 10px #cc...

黑马程序员前端-CSS：溢出的文字省略号显示

黑马程序员官方博客

04-06

3028

按照HTML+CSS的学习顺序笔记已经更新了28篇内容了，因为篇幅问题，请看文末。目录一、单行文本溢出显示省略号 二、多行文本溢出显示省略号（了解即可）三、往期合集今天来学溢出文字省略号显示。一、单行文本溢出显示省略号 单行文本溢出显示省略号必须满足三个条件： /*1. 先强制一行内显示文本*/ white-space: nowrap; （默认 normal 自动换行） /*2. 超出的部分隐藏*/ overflow: hidden;

VUE中如何阻止事件冒泡

qq_17355709的博客

01-17

1万+

当父子元素中都有点击事件的时候，为了让触发子元素中的事件时，不去触发父元素中的事件，可以在子元素事件中添加stop来阻止事件冒泡。如图，在button的点击事件中加上stop，触发addStatus的时候，就不会去触发父元素中的showColorStatus事件。 ...