文章/答案/技术大牛

发布

css多行文本截断

CSS多行文本截断基础概念

CSS多行文本截断是指在网页设计中，当文本内容超过指定的容器宽度时，通过CSS样式来控制文本的显示方式，使其在视觉上呈现为截断的效果。这种技术常用于保持页面布局的整洁性和美观性。

类型

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

应用场景

新闻列表：在有限的空间内展示新闻标题。
产品描述：在商品列表中截断详细描述，引导用户点击查看详情。
社交媒体：在用户动态中截断长文本，保持页面整洁。

示例代码

以下是一个多行文本截断的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多行文本截断示例</title>
    <style>
        .container {
            width: 300px;
            border: 1px solid #ccc;
            padding: 10px;
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3; /* 限制显示3行 */
        }
    </style>
</head>
<body>
    <div class="container">
        这是一个多行文本截断的示例。当文本内容超过指定的容器宽度时，通过CSS样式来控制文本的显示方式，使其在视觉上呈现为截断的效果。这种技术常用于保持页面布局的整洁性和美观性。
    </div>
</body>
</html>

遇到的问题及解决方法

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

原因：-webkit-line-clamp 是一个非标准的CSS属性，主要在WebKit内核的浏览器（如Chrome和Safari）中支持。其他浏览器可能不支持该属性。

解决方法：

使用Polyfill：可以使用一些JavaScript库来实现跨浏览器的多行文本截断效果。
回退方案：对于不支持 -webkit-line-clamp 的浏览器，可以使用单行文本截断作为回退方案。

.container {
    width: 300px;
    border: 1px solid #ccc;
    padding: 10px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; /* 限制显示3行 */
    text-overflow: ellipsis;
    white-space: normal;
}

参考链接

通过以上信息，您可以更好地理解CSS多行文本截断的基础概念、优势、类型、应用场景以及常见问题的解决方法。

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

有帮助

没帮助

多行文本省略的Flexbox

html、css、flexbox

我一直在使用空格:无包装、文本溢出:省略和溢出:隐藏的CSS属性来创建多行文本的省略截断。然而，当使用flexbox时，这是行不通的。当使用flex时，文本溢出:省略似乎总是将flex项的高度截断为一行。 <p>long multiline text

浏览 5提问于2016-08-16得票数 3

3回答

更新它与这个问题不同，因为它不仅要求文本截断；正如我所提到的，我已经使用进行了文本截断。相反，它要求只有在文本被截断时才有“阅读更多”链接(如果可能的话，只使用CSS )。目前，我使用在文本溢出时生成省略号(当它不能放入一行时)。但是，现在我还想在发生溢出时在行尾包含一个“阅读更多”链接，单击该链接将显示多行中的所有内容。只有CSS才能做到这一点吗？顺便说一句，我看到了，不管文本是否溢出，它都会显示

浏览 10提问于2016-02-08得票数 6

1回答

裁剪阴影多行文本

html、css

有阴影的多行文本，但它的高度应该被裁剪成只显示3行的文本：<style> max-height: 4em;} text-shadow: 0 0 20px #000;</style> 正如所看到的，文本阴影也正在被裁剪，所希

浏览 2提问于2017-09-01得票数 1

回答已采纳

1回答

截断以多行为中心的文本&添加椭圆

javascript、html、css

我想知道如何截断多行文本(在我的例子中，在三行之后)&在文本居中时添加一个省略号。另一种解决方案建议隐藏/显示div w/“.”在文本div的右下角，但这并不适用于居中文本。还有其他想法吗？

浏览 1提问于2014-06-11得票数 0

回答已采纳

1回答

如何在CSS3中截断过长的单词？

css、html、text、truncate

有没有可能用CSS3截断超出包含框(如div或段落)的单词？white-space: nowrap;属性对我不起作用，因为我的文本是以多行编写的，而white-space: nowrap;将我的文本变成一行。

浏览 4提问于2013-09-08得票数 0

1回答

是否有一种方法使DetailsList标题文本包装在Fluent UI中？

office-ui-fabric、fluent-ui、office-ui-fabric-react、fluentui-react

在这种情况下，头将被截断。。我可以用DetailsHeader重写呈现的onRenderDetailsHeader组件本身似乎没有提供任何支持来自定义文本的显示方式。是否有一种方法可以实现所需的行为(将多行括起来而不是截断长列标题)？

浏览 11提问于2020-11-06得票数 4

回答已采纳

10回答

带有截断文本的多行NSAttributedString

ios、core-text

我需要一个具有多行属性文本的UILabel子类，支持链接，粗体样式等。我还需要一个省略号尾部截断。在UILabels (TTTAttributedLabel，OHAttributedLabel，TTStyledTextLabel)中支持属性文本的开源代码似乎都不支持多行文本的尾部截断。

浏览 5提问于2011-09-30得票数 27

回答已采纳

4回答

溢出:隐藏的点和多行文本的结尾

html、css

我想要这样的东西：(下面的图片是我的目标)(删除最后一行的残缺文本，并在文本末尾添加... )怎么做？

浏览 2提问于2012-07-18得票数 1

回答已采纳

2回答

Xamarin形式-多行文本截断

xamarin.forms

截断标签文本使其为一行。App显示了描述，它需要以2-3行的形式显示，但是Xamarin "LineBreakMode=TailTruncation“会截断它并将其限制为一行。是否有任何方法截断标签文本并以多行方式显示。如果文本不符合n行数，那么它应该被截断。

浏览 5提问于2016-06-23得票数 8

回答已采纳

1回答

带有UILineBreakModeTailTruncation的NSString drawInRect没有显示"...“

iphone、objective-c、uitableview、drawing

TEXT_RECT withFont:font lineBreakMode:UILineBreakModeTailTruncation alignment:UITextAlignmentLeft];如果我使用drawInPoint如

浏览 0提问于2010-10-12得票数 2

回答已采纳

2回答

Rails索引视图-在记录组之前将列数据显示为单独的标题行

html、ruby-on-rails、ruby-on-rails-3、erb

我陷入了一个问题，我必须在记录之前将列td数据显示为单独的标题行。下面是我必须对其执行此操作的代码：<table> <th>Product</th> <th>Role</th> <th>State</th> <th>AMI ID</

浏览 1提问于2014-04-06得票数 0

1回答

如何在较大的文本框中编辑DataGridView文本单元格

c#、winforms、datagridview、textbox、edit

有些单元格在DataGridView中显示得有点长，所以我截断文本并添加“.”到课文。我不想把文字包装成多行。我想让用户编辑列中的文本。在EditingControlShowing中，我当前将编辑TextBox的文本设置为文本的完整值(否则只显示截断的值)。目前一切都很好。如何使编辑TextBox垂直扩展到其单元格之外(单元格只有一行高)，以使用户更容易编辑多行条目？

浏览 2提问于2018-03-23得票数 2

回答已采纳

1回答

滚动后的UILabel截断

ios、objective-c

我有一个有图像和多行文本的滚动视图。self.scrollview.contentSize = CGSizeMake(self.scrollview.contentSize.width, contentRect.size.height + 10); 但是，当我触摸屏幕滚动内容时，带有多行文本的UILabel被截断为1行。我做了一个视频显示它正在发生：，如果我删除上面的代码，文本不会被截断。但是屏幕不会用大文本滚动。知道怎么解决这个问题吗？

浏览 0提问于2015-09-16得票数 0

回答已采纳

1回答

angular指令jquery.dotdotdot，如何‘动画’截断？

javascript、jquery、css、angularjs、truncation

我做了一个“多读”或“少读”链接，在文本后切换截断。因为我将指令限制为attribute，所以可以在许多项上使用它，但在我的示例中，我在多行文本上使用它。为了让它看起来更流畅，并提供更多的反馈，我试图放慢或动画截断和非截断之间的转换。实际的截断是有效的。$(element).find(".read-less").remove()我尝试了在元素和元素的父元素(表中的td )上使用.css

浏览 0提问于2014-02-08得票数 0

3回答

jQuery子串不会影响所选元素

jquery、substring

所以我有一个多行跨度元素，如果它的长度超过一定的字符数，我需要对它进行省略，我正在使用jQuery来做到这一点， <div class="myClass"> console.log("hellooooo"); } 他们说，这种多文本椭圆不能用纯CSS完成所以问题是，即使"helloooo“被打印到控制台，文本也不会被截断！我做错了什么？！！

浏览 36提问于2019-02-01得票数 0

回答已采纳

1回答

如何使框字段大小相同

twitter-bootstrap-3

以下是答案：.alertProperties { padding-left:0px !

浏览 2提问于2021-07-29得票数 0

2回答

多行文本溢出: CSS或JS中带有img标记的省略号。

jquery-plugins、css、overflow、typography、ellipsis

我试着用： JQueryauto省略()。所有这些工具都运行得很好，但是如果内容中有图像，则用dotdotdot或jquery.autoellipsis计算的截断高度是错误的。

浏览 5提问于2012-01-05得票数 6

2回答

在SKLabelNode中显示多行

swift

我检查了在SKLabelNode中没有多行的属性。是否可以在SKLabelNode中显示多行？如果没有，请给出以多行显示文本的想法。

浏览 0提问于2014-11-11得票数 2

6回答

使用HTML/CSS限制句子的长度

html、css

<p> 我想缩短它，即使它在json中已经被缩短了，我能使用纯css或html来限制它的长度吗？我不需要任何javascript/Jquery建议，因为如果涉及到javascirpt，很容易完成这个任务，我可能只需要使用dom，但在本例中，我想看看是否有任何纯html和css方法可以做到这一点。更新1:每个人都建议我使用white-space: nowrap将句子转换成一行，然后通过设置text-overflow:ellipsis来隐藏文本，但是有一个限制，html只能显示一行。

浏览 1提问于2016-05-19得票数 1

回答已采纳

3回答