开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

css多行文字截断

CSS多行文字截断基础概念

CSS多行文字截断是指在网页设计中，当文本内容超过指定的宽度时，通过CSS样式来控制文本的显示方式，使其在多行内被截断并显示省略号（...）。这种技术常用于保持页面布局的整洁性和美观性。

相关优势

保持布局稳定：防止因文本内容过多而导致页面布局混乱。
提升用户体验：通过截断和省略号提示用户有更多内容可查看。
节省空间：在有限的空间内展示尽可能多的信息。

类型

单行截断：使用 text-overflow: ellipsis; 和 white-space: nowrap; 实现。
多行截断：使用 -webkit-line-clamp 属性（WebKit浏览器专用）和 display: -webkit-box; 实现。

应用场景

新闻列表标题
商品描述
社交媒体帖子摘要

示例代码

以下是一个CSS多行文字截断的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS多行文字截断示例</title>
    <style>
        .truncate {
            width: 300px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3; /* 限制显示3行 */
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
    <div class="truncate">
        这是一段很长的文本，我们需要通过CSS来控制它在多行内被截断并显示省略号。这种技术常用于保持页面布局的整洁性和美观性。
    </div>
</body>
</html>

遇到的问题及解决方法

问题：为什么 `-webkit-line-clamp` 在某些浏览器中不起作用？

原因：-webkit-line-clamp 是WebKit浏览器专用的属性，非WebKit浏览器（如Firefox、Edge）不支持该属性。

解决方法：

使用JavaScript检测浏览器类型，针对不同浏览器使用不同的CSS样式。
使用Polyfill：例如 clamp.js，可以在不支持 -webkit-line-clamp 的浏览器中实现类似效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS多行文字截断示例</title>
    <style>
        .truncate {
            width: 300px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3; /* 限制显示3行 */
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .truncate-fallback {
            display: block;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    </style>
</head>
<body>
    <div class="truncate">
        这是一段很长的文本，我们需要通过CSS来控制它在多行内被截断并显示省略号。
    </div>
    <script>
        if (!('webkitLineClamp' in document.body.style)) {
            document.querySelector('.truncate').classList.add('truncate-fallback');
        }
    </script>
</body>
</html>

参考链接

通过以上内容，您可以了解CSS多行文字截断的基础概念、优势、类型、应用场景以及常见问题及解决方法。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

Css 实现多行文字截断

做响应式系统设计的时候遇到需要对标题进行多行文字截取的效果，如下图： ?...响应式系统设计看似十分简单的标题截断效果，但是竟然没有一个统一 CSS 属性实现标准，需要用到一些奇淫妙计来实现，一般来说，在做这样文字截断效果时我们更多是希望：兼容性好，对各大主流浏览器有好的支持...缺点：就是只支持单行文本截断，并不支持多行文本截取。适用场景：单行文字截断最简单实现，效果最好，放心使用。如果是多行文字截取效果，实现起来就没有那么轻松。...float 特性实现多行文本截断回到一开始我要做的内容是多行标题文字截取效果，显然是无法控制标题的长度的，显然是无法使用上述的方式。...正当我以为 CSS 已经无能为力，只能通过 JS 去实现的时候，后来看到了一个方法非常巧妙，而且能够满足上述提到的所有准则，下面我就介绍如何通过 float 特性实现多行文本截断效果。

2.3K0 0

css3 javascript 单行和多行文本溢出截断多种方案

写在最前面在我们日常开发中的时候经常会遇到一种业务场景，需要截断一些文字的显示。可能是一行或者两行，或者根据字数限制或者用户的显示屏幕大小来展示对应的文字。...css 篇一：单行文本溢出处理代码 .text-ellipsis-single{ overflow: hidden; white-space: nowrap; text-overflow...预览codepen 情况 codepen.io/lpove/pen/M… 分析兼容性好，但是只支持一行，可以简单满足截断的文本的要求二：多行文本截断代码多行文本注意设置 line-height...如果涉及到英文，需要截断单词可以优化一下。...'; textHolder.innerHTML = newText; } }　　复制代码二：计算行数截断多行文本 javascript 方法我们也可以直接计算 function ellipsizeTextElement

1.3K1 0

CSS 中多行文字溢出后显示省略号

CSS如下: .book-description{ height:3.75rem; font-size:0.625rem; color:#8f8f8f; line-height

1.1K1 0

css截断长文本显示

实现截断长文本显示处理，以前是通过后台的截取，但这种方法容易丢失数据，不利于SEO。而通过前端css的截断，则灵活多变，可统一运用与整个网站。...这项技术主要运用了text-overflow属性，这个虽是css3的属性，但是在各大浏览器却兼容非常好，ie6系列全部兼容。

1.6K7 0

CSS Flex 实现文本截断

pdf .css： .filename { display: flex; } .

1.3K2 0

纯CSS实现文字一行居中，多行左对齐的方法

纯CSS实现文字一行居中，多行左对齐的方法其实这种需求还是蛮常见的。主要用于产品列表页面，用于产品图片下面，显示产品的名称。但是其纯CSS实现实在是烧脑，一般就放掉这个需求，或者，使用JS实现。...但是，我坚信这一定能用纯CSS来解决！！我为什么如此信念笃定呢？因为我多年前在蓝色理想论坛见到过高手解决过！！！好吧。我实在是找不到这个帖子了，万能的百度没能给我解决方案。我只能自己想办法了。...问题描述如何使用css实现文字一行居中，多行左对齐？想要实现的效果为：未知文字长度，当文字长度小于盒子宽度，也就是一行时，文字居中。...当文字长度大于盒子的宽度，会自动换行，成为多行文字，此时文字左对齐。好了！该如何实现呢？经过我自己的研究，找到了两种解决方法！！解决方法一：利用行内元素我首先想到了这个思路，思路如下：文字左对齐 P的宽度根据文字的宽度伸缩当文字为一行是，则P的宽度小于LI的宽度，又居中则，看上去文字是局中的当大于一行时，P的宽度和LI的宽度是一致的文字就居左了

2.7K1 0

让WordPress 在RSS 中Feed 截断文字输出

我们可以截断部分文字输出，配合加上版权信息，完美解决！...要截断文字输出的话，相信你也知道了，是用 mb_strimwidth 函数，下面直接献上Jeff的代码吧——Jeff的阳台就是用这段代码的： //在RSS 中Feed 截断文字输出 devework.com

2.1K5 0

css 文字隐藏

css 文字隐藏 1. 文字越界显示点点点在 HTML 页面上，遇到文字长度超出一定长度的时候，我们希望将超出的部分显示为......在文字后面，添加图标遇到复杂得情况，我们需要在这段文字后面紧跟一个图标，当文字溢出得时候，图标能照常显示在后面 e.g.

2.9K5 0

css彩虹渐变文字

以前看到过彩虹文字，觉得挺好玩的，今天就去仿着弄了下。...（其实和看到的那个差不多_(•̀ω•́ 」∠)_） css代码： css"> .rainbow{ background-image: -webkit-gradient...( 效果：彩虹文字(<ゝω·)☆~Kira~ P.S.这个是针对webkit核心浏览器的，其他的我没看也没弄过。...php if(strpos($_SERVER['HTTP_USER_AGENT'],"AppleWebKit")) echo '彩虹文字('; else echo '彩虹文字('; ?

8071 0

CSS层叠文字动画

---- 很实用的一个动画，body里定义了文字，可以凭键盘任意修改，灵感来自于站长之家。公众号转型做了恋爱婚庆相关，Yeah！ css3层叠文字动画 body

2.9K2 0

什么情况下使用多行文字

在条码打印软件中有多种文本模式：单行文字、多行文字和圆弧文字。每种文本工具都有其特点，使用时根据需求选择更合适的文本工具。...多行文字可以一次性编辑大段固定文字信息，可以自动换行，适合产品配方、产品说明书等，非常方便。小编下面将详细介绍多行文字。　　首先打开条码标签打印软件，新建一个标签，设置标签的尺寸。...点击“多行文字”按钮，在画布上拖拽出一个文本框，在弹出的界面里输入文字信息。 01.png 　　文字输入完成后，在软件右侧选择字体、字号和颜色，还可以选择给文字加粗。...我们从多行文字的内容可以看出，这些信息都是固定文字，而非变量，输入之后基本不需要变动。...03.png 　　以上就是条码标签打印软件中多行文字的使用介绍，在设计制作标签时，根据标签的内容选择合适的文本工具将会使工作更加轻松。

5272 0

文字描边css

#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0; *filter: Glow(Color=#000, Strength=1); 第二种通过文字阴影的方法模仿描边

1.5K10 0

css特效 - 环形文字

记一次群友问题和回答：下面这种效果，文字是动态的，不能使用图片的情况下，前端怎么实现？...一、插件实现： arctext.js 教程地址：实现文字平滑弯曲弧形效果的插件-arctext.js 二、原生css实现：《css揭秘》书籍中讲解文章教程地址：CSS秘密花园：环形文本

4.6K3 0

条码软件上的多行文字如何换行

条码软件在设计制作标签时，添加普通的文字是必不可少的功能，添加文本数据有三种方式，分别是单行文字，多行文字和弧形文字。单行文字顾名思义不可以换行，添加数据库字段比较灵活。...多行文字可以换行，下面我们就详细介绍多行文字的换行显示问题。首先打开条码软件，点击软件左侧的多行文字工具，拖拽出一个文本框，在弹出的界面中输入文本数据。...01.png 文字输入后，在软件右侧设置文字的字体和字号。 02.png 鼠标选中文本框，然后拖动文本框两边的绿色小圆球调整文本框的宽度到合适的位置，使文本数据自动换行显示。...04.png 文字输入后，在软件右侧设置字体和字号。样式如下。 05.png 综上所述就是多行文字换行的方法，此种方法没有设计数据库，后续我们还会向大家介绍批量打印时如何操作。

2.5K1 0

css文字居中原

注意上面的dt里面包含div,否则下面的样式vertical-align:middle;无效，因为dt是浮动的，在里面包含一个div就可以解决vertical...

3.3K2 0

CSS 单多行文本溢出样式

单行文本溢出省略核心 CSS 语句 overflow: hidden; 文字长度超出限定宽度，则截断超出的内容 white-space: nowrap; 规定段落中的文本不进行换行 text-overflow...vertical; 和 1 结合使用，设置或检索伸缩盒对象的子元素的排列方式 display: -webkit-box; 和 1 结合使用，将对象作为弹性伸缩盒子模型显示 overflow: hidden; 文字长度超出限定宽度...，则截断超出的内容 text-overflow: ellipsis; 文本溢出时，用省略号来代替 Demo div { width: 150px; height: 40px;...不过这个方案有个不好的点就是兼容性不好 -webkit-line-clamp 属性只有 webkit 内核的浏览器才支持，多适用于移动端页面，移动端的浏览器更多是基于 WebKit 内核的今天，你学废了吗~ 首发自：CSS...单/多行文本溢出样式 - 小鑫の随笔

1.8K3 0

exlipse同时操作多行。比如同时在多行同列输入相同的文字

先选择要操作的行，在同时按shift+alt+a,会将所选中的文字括起来，鼠标会变成十字图标，按住鼠标左键，在相应输入文字的位置上下拖动，会出现一个竖杠，此时即可开始输入文字了，并且所选中行都有哦，是不是很神奇

9072 0

可能是最全的 “文本溢出截断省略” 方案合集

看上去 “稀松平常” ，但在实现上却有不同的区分，是单行截断还是多行截断？多行的截断判断是基于行数还是基于高度？这些问题之下，都有哪些实现方案？他们之间的差异性和场景适应性又是如何？...先来点基础的，单行文本溢出省略核心 CSS 语句 overflow: hidden；（文字长度超出限定宽度，则隐藏超出的内容） white-space: nowrap；（设置文字在一行显示，不能换行...进阶一下，多行文本溢出省略（按行数） ○ 纯 CSS 实现方案核心 CSS 语句 -webkit-line-clamp: 2；（用来限制在一个块元素显示的文本的行数，2 表示最多显示 2 行。...文本溢出范围才显示省略号，否则不显示省略号短板省略号显示可能不会刚刚好，有时会遮住一半文字适用场景适用于对省略效果要求较低，多行文本响应式截断的情况 Demo .demo...参考文章纯 CSS 实现多行文字截断 ( https://github.com/happylindz/blog/issues/12 ) 【 CSS / JS 】限制一行和多行文字数量，溢出部分用省略号显示

3.2K1 1

可能是最全的 “文本溢出截断省略” 方案合集

看上去 “稀松平常” ，但在实现上却有不同的区分，是单行截断还是多行截断？多行的截断判断是基于行数还是基于高度？这些问题之下，都有哪些实现方案？他们之间的差异性和场景适应性又是如何？...先来点基础的，单行文本溢出省略核心 CSS 语句 overflow: hidden；（文字长度超出限定宽度，则隐藏超出的内容） white-space: nowrap；（设置文字在一行显示，不能换行...进阶一下，多行文本溢出省略（按行数） ○ 纯 CSS 实现方案核心 CSS 语句 -webkit-line-clamp: 2；（用来限制在一个块元素显示的文本的行数，2 表示最多显示 2 行。...文本溢出范围才显示省略号，否则不显示省略号短板省略号显示可能不会刚刚好，有时会遮住一半文字适用场景适用于对省略效果要求较低，多行文本响应式截断的情况 Demo .demo...参考文章纯 CSS 实现多行文字截断 ( https://github.com/happylindz/blog/issues/12 ) 【 CSS / JS 】限制一行和多行文字数量，溢出部分用省略号显示

3.5K2 0

单行和多行文字溢出处理方式

单行文字溢出处理 p { width: 100px; text-overflow: ellipsis;// 显示省略符号来代表被修剪的文本 white-space: nowrap;...//文本不会换行，文本会在在同一行上继续，直到遇到标签为止 overflow: hidden;// 超出部分隐藏 } 效果如图：多行文字溢出处理 p { overflow: hidden

1581 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭