使用CSS将多余文字显示成省略号

原创已于 2022-06-01 05:25:33 修改 · 1.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3

于 2022-06-01 05:22:05 首次发布

本文介绍CSS如何隐藏溢出内容（overflow:hidden;），使用text-overflow:ellipsis处理省略，以及word-break:break-all处理多行文字，并探讨-webkit-line-clamp属性实现限定显示行数。适合理解文本布局和前端开发者。

单行文字

　overflow: hidden;
　text-overflow:ellipsis;
　white-space: nowrap;

多行文字

　word-break: break-all;
　text-overflow: ellipsis;
　display: -webkit-box;
　-webkit-box-orient: vertical;
　-webkit-line-clamp: 2;
　overflow: hidden;

-webkit-line-clamp: 行数

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

_嗯哼__

关注关注

1
点赞
踩
1

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

字符串过长CSS截取多余文字并用省略号显示

12-13

最近才知道css也有这么叼炸天的一面~~~ 做个类似论坛的页面，用户头像70px，但是用户名没法限定啊，英文中文都可以，你说他要是取个“我的名字好长呀，你该怎么办呢”，那老衲不就狂急了~~ 幸好，老衲于不幸中的万幸中发现了css这么叼炸天的一面，以前一直不知道，写出来分享给大家很简单，话不多说，直接上代码： css里面如下设置：复制代码代码如下: a.name{ line-height: 30px; text-align: center; <span xss=removed>text-overflow:ellipsis;</span>//让超出的用…实现 <

CSS实现标题文字过长部分显示省略号的方法

01-19

前段时间在公司移动站的重构，遇到了一个产品列表title的需求是只显示两行，然后超过两行的字符用省略号显示。如下图的效果，当时第一感觉是这个需求只能通过后台输出的时候截取字符去处理，或者通过JS计算字符来处理，因为样式无法控制换行文本出现省略，但是因为我们新版的移动站是流式布局，在不同分辨率下的手机换行的宽度是不确定的，所以就没有标准的字符截取的数量范围。例如：15个字在iphone上面是两行显示，但是在三星上就可能不是两行显示了，有可能值显示一行，又或者在分辨率更低的手机15字已经是三行显示了，遇到了这种场景就很头痛了。先来回顾下，单行文本换行的写法：复制代码代码如下:A20 Banana

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

css中多余文字省略号显示

ailong3046的博客

08-15

428

项目中很多情况都要求多余的文字要以省略号的形式展示在前端页面上。虽然用的多，但是我也不知道为啥，我始终记不住。所以，通过这种方式，让自己加深一下印象情况一：单行文字超出规定宽度后，以省略号形式展示具体的样式如图：代码： .css{ width:200px;//示例宽度 height:40px;//示例高度 overflow:hidden...

css实现多余文字以省略号形式显示

一瓢水的博客

01-19

657

css多余文字省略号显示

CSS多余文字省略号显示

weixin_43599321的博客

04-17

995

CSS多余文字省略号显示。

微信小程序实现指定显示行数多余文字去掉用省略号代替

10-18

在微信小程序开发中，实现指定显示行数并用省略号代替超出的多余文字是一种常见的文本显示需求。当文本内容超出特定范围时，通常希望以一种优雅的方式显示给用户，比如显示固定行数的文字，并用省略号（...）代替...

css 省略号 css3让多余的字符串消失并附加省略号的实现代码

09-25

在Web开发中，为了更好地优化用户界面的阅读体验，常常需要对超出容器宽度的文本进行...总之，CSS省略号技术是提升Web页面用户体验的一个重要方面，通过合理使用这些CSS属性，可以让页面上的文本显示更加整洁和专业。

使用text-overflow:ellipsis实现文字超出用省略号显示

09-25

具体来说，要实现文字超出用省略号显示的效果，可以按照以下步骤进行设置： 1. `white-space: nowrap;` 这个属性值设置使得文本不会换行，所有内容都在一行内显示。 2. `overflow: hidden;` 此属性设置隐藏超出元素...

【CSS3】多余文字省略解决方案

ascu72892的博客

10-24

547

单行文字省略 .truncation { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } 在这里我使用该样式在行内标签中，不会出现 ... ，在外部嵌套一个块级标签然后再使用该样式就会成功多行文字省略 .multiple-line { o...

css设置文字多余部分显示省略号

reg183的专栏

12-07

368

如果只显示一行，则可以使用以下方法：　　overflow:hidden; 　　text-overflow:ellipsis; 　　white-space:nowrap; 如果需要显示多行，在需要设置的元素style中添加以下代码：　　word-break: break-all; 　　text-overflow: ellipsis; 　　display: -webkit-box; 　　-webkit-box-orient: vertical; 　　-webkit-line-clamp..

css怎么让多余文字显示省略号

qq_43405603的博客

09-14

7029

CSS多余的文本文字使用省略号显示

qq_44035882的博客

08-19

2642

1、超出一行试用省略号（这里是使用uni-app开发小程序的代码，如果是其他的也是异曲同工之处）（注意：有时添加在嵌入样式中不生效，需要添加在行内样式中）其他的多行效果以此类推（大都需要设置盒子的宽度）2、文本超出两行三行多行。

CSS：多余文字用省略号

最新发布

一些平时在开发过程中遇到的常见问题，分享给大家

12-04

285

CSS：多余文字用省略号

css控制文字多余部分省略号显示

haha-zhao的博客

03-22

216

css控制文字多余部分省略号显示 HTML部分代码 <body> <div class="text_box"> Vue是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。 Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。 </div> </body> css代码单行显示，多余文字显示省略号 .text_box{ width

文字超出展示省略号（css样式）

weixin_69227792的博客

02-02

1965

在实际开发过程中，为了页面的美观性，我们往往需要省略展示过多的文字，所以就需要用省略号来展示超出的内容。

css，文字超出用省略号，包含单行文本省略号，多行文本省略号

lj_1598的博客

10-29

9488

css，文字超出用省略号，包含单行文本省略号，多行文本省略号

CSS - 多余文字省略号显示

kelly0721的博客

09-16

945

一、单行文本样式 white-space:nowrap; //溢出不换行 overflow:hidden; //超出部分隐藏 text-overflow:ellipsis; //超出部分设置省略号显示 // 需要是一个有固定宽度的块元素 width: 200px; display: inline-block; 二、多行文本样式 overflow:hidden; // 超出部分隐藏 text-overflow:ellipsis; // 溢出显示用省略号 // 这几条属性是重点 display

css 多余文字隐藏，显示省略号。

web_wq

06-04

1361

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <style> ...

css多余文字显示省略号

08-13

在CSS中，我们可以使用text-overflow属性来实现多余文字的显示省略号。首先，要让文本内容能够被省略，我们需要设置一个固定的宽度或者最大宽度给包裹文本内容的元素，例如一个div或者一个段落（p）。接下来，...