用CSS如何设置title显示行数，且多余字以...形式展示

最新推荐文章于 2025-04-14 16:08:29 发布

原创最新推荐文章于 2025-04-14 16:08:29 发布 · 483 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#CSS

本文介绍了一种使用CSS实现标题样式的方法，包括字体大小、显示模式、溢出隐藏、换行、文字溢出省略等，通过-webkit-line-clamp属性限制行数。

css样式如下：

.video_title{

font-size: 28rpx;

display: -webkit-box;

overflow: hidden;

white-space: normal;

word-wrap: break-word;

text-overflow: ellipsis;

-webkit-line-clamp:2;

-webkit-box-orient: vertical;

}

展示效果：

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Dring1995

关注关注

0
点赞
踩
0

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

【vue+css】截取字符长度固定行数超出部分显示点点

栀妹儿的炼丹炉

05-10

1477

以下解决方法来自God丶魔多的博客想要在app的页面显示绑定后的微信名：不换行，超出长度变点点 template是这样： <mu-list class="bg"> <mu-list-item title="" > <i slot="left" class="left-icon iconfont icon-weixin"/> <span class="bdType">微信</span> <span class='bdna

CSS 实现文本“不定行数“截断

厦门在乎科技

10-25

450

偶然发现，在某乎热榜页有一个很有意思的布局，这里的标题会制约内容的行数，所以文本超出是"不定行"的。详细规则如下：整个容器高度是固定的，标题和内容总共 3 行标题最多2行，超出省略内容由剩余空间决定，如果标题占2行，则内容超出1行省略；如果标题占1行，则内容超出2行省略是不是很灵（离）活（谱）的交互？可以充分利用页面空间，保证标题和内容都能展示出来看了下原站的实现，是通过 js 判断标题高度，然后动态添加一个类名实现的。不过呢，经过一番琢磨，这里也是可以纯 CSS 实现的，一起来看看吧

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

css设置title字体_初识CSS

weixin_30762173的博客

01-14

2104

快关注我，一起学习吧~“ CSS(Cascading Style Sheets)：“层叠样式表”。是一种用来表现HTML或XML等文件样式的计算机语言。主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及布局等外观显示样式。 CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的...

html中如何在标题中加样式,css如何实现title效果

weixin_40001372的博客

05-31

718

css如何实现title效果1、首先在元素上添加自定义数据data-title；2、然后通过伪类选择器:hover和::after设置悬浮显示的样式3、最后通过attr()获取自定义的数据即可。(推荐学习：CSS视频教程)代码如下：Documentdiv {position: relative;}div:hover::after {content: attr(data-title); /*取到da...

CSS修改鼠标悬停时title属性的展示样式

weixin_53874202的博客

07-15

7319

鼠标悬停title属性展示样式

js判断最后一个字符是不是指定字符_结合简单的 JS 就可以让 CSS 也能做搜索

weixin_39640909的博客

12-03

1608

是的，结合简单的 JS 代码就可以让 CSS 做当前页面的搜索引擎。效果大概就是这样：其实呢这个是很早之前我就整了，用来给自己的一些无聊的 demo 或者瞎折腾玩的页面做索引搜索的。页面不多，但有时候时间久了就忘了自己曾经折腾过什么页面，那么搜索就肯定可以起到作用了。那么这样一个索引的页面，怎么才能用最简单的方式去做搜索的操作呢。想来想去，想到了:not 这个选择符。先看一下这段代码，...

css 实现 title的效果，并且自己写修改类似title样式

twinkle的博客

06-18

7028

效果如下：代码如下： /** 使用data-tip来实现title的效果 */ // 通过属性选择器获取到标签，加上相对定位 [data-tip] { position: relative; display: inline-block; } // 统一设置伪类的样式 [data-tip]::before, [data-tip]::after { position: absolute; visibility: visible; opacity: 0; z-index: 2020

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

10-18

以上所述就是微信小程序实现指定显示行数多余文字去掉用省略号代替的方法，希望对正在从事微信小程序开发的朋友们有所帮助。在实际开发中，还需考虑文本内容的长度、用户的交互体验等细节问题，以达到最佳的显示效果...

如何限制div中的文字行数，多余的用省略号替代

12-09

在CSS中，可以通过设置一些属性来限制`div`中的文字行数，并在文字超出限制时用省略号替代。具体步骤如下： 1. **设置显示的行数**：使用`-webkit-line-clamp`属性来指定显示的行数。 2. **设置显示模式**：使用`...

在固定高度的div里，最多可以展示5行文字，超过的用...,且文字在垂直方向居中展示

最新发布

11-11

我们有一个需求：在固定高度的div里，最多展示5行文字，超出部分用省略号显示，并且文字在垂直方向居中展示。分析需求： 1. 固定高度：我们需要设置一个固定的高度，这个高度应该能够容纳5行文字（包括行间距）。...

css如何控制文本显示行数

yunshangkeji的博客

06-30

7495

单行显示，超出部分隐藏为省略号，并且不换行p { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }多行文本超出部分隐藏为省略号 p { display: -webkit-box; -webkit-box-orient:...

box-shadow属性四个值_CSS中简写属性要注意TRouBLe的顺序，避免踩坑

weixin_39775106的博客

11-28

1314

简写属性是用于同时给多个属性赋值的属性。比如font是一个简写属性，可以用于设置多种字体属性。它指定了font-style、font-weight、font-size、font-height以及font-family。font: italic bold 18px/1.2 "Helvetica", "Arial", sans-serif;还有如下属性：background是多个背景属性的简...

CSS实现多行文字限制显示

weixin_30686845的博客

03-20

662

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1,...

CSS 自定义提示(重写 title 属性)

前端技术

07-05

2233

CSS 原生 title 属性太丑，需要重写。

笔记：前端中可以给每个标签添加 title属性经行描述怎么修改默认样式

sky8880的博客

04-14

481

前端中可以给每个标签添加 title属性经行描述怎么修改默认样式

css修改元素属性title

weixin_38355349的博客

04-15

9191

css修改元素里面的title的样式优点：样式可以自定设置，位置设置后就固定了；缺点：不能像title一样随时出现在鼠标所在点位置。 <div data-title="标题" class="tip">我是一个测试</div> .tip{ position: relative; } .tip:hover:after { position:absolute; top...

css样式多行展示省略号

weixin_46724226的博客

03-16

357

display: -webkit-box; -webkit-box-orient: vertical;// 必须增加这个属性，在线上才能展示省略号 -webkit-line-clamp: 2; word-wrap: normal; word-break: break-word; overflow: hidden;

进阶——CSS中多行文本时的行数控制显示

番薯大佬的专栏

04-18

5155

WeChat小程序交流（QQ群：769977169）有时候要进行多行文本内容只显示一行，或两行，或三行，这时候需要在css中进行相关属性的设置，代码如下：overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; // 显示2行 -webkit-box-orient: vertical; word-break: break-all;......

Day02.HTML和CSS实现标题样式

m0_74197695的博客

03-07

592

特点：一行可以显示多个(组合行内元素)，宽度和高度默认由内容撑开。是一个在开发网页时大量会用到的没有语义的布局标签。注意：使用外联样式时一定要写一个单独的.css文件，如下图。font-size：字体大小（注意：记得加px）举例说明:(调节标题颜色三种方式）在css文件夹中创建.css文件。color：设置文本的颜色。