文章/答案/技术大牛

发布

css文字截断

CSS文字截断基础概念

CSS文字截断是一种在网页设计中常用的技术，用于处理文本溢出容器边界时的显示问题。通过CSS，可以控制文本在达到容器边界时如何显示，以避免布局混乱或内容被遮挡。

类型

文本溢出隐藏（text-overflow: ellipsis）：当文本溢出容器时，显示省略号。
单行文本截断：限制文本在一行内显示，并在溢出时截断。
多行文本截断：限制文本在多行内显示，并在溢出时截断。

应用场景

新闻标题：在有限的空间内显示完整的新闻标题。
搜索结果：在搜索结果列表中显示简短的描述。
商品列表：在商品列表中显示简短的商品名称。

示例代码

单行文本截断

<!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: 200px;
            border: 1px solid #000;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    </style>
</head>
<body>
    <div class="container">
        这是一段很长的文本，需要被截断以适应容器的宽度。
    </div>
</body>
</html>

多行文本截断

<!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: 200px;
            height: 50px;
            border: 1px solid #000;
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
    <div class="container">
        这是一段很长的文本，需要被截断以适应容器的高度。通过CSS的多行文本截断技术，可以确保文本在多行内显示，并在溢出时截断。
    </div>
</body>
</html>

常见问题及解决方法

问题：为什么文本没有被截断？

原因：

容器宽度或高度不足：确保容器的宽度和高度足够容纳文本。
CSS属性未正确设置：确保overflow: hidden、text-overflow: ellipsis和white-space: nowrap（单行）或display: -webkit-box等属性已正确设置。

解决方法：检查并调整容器的宽度和高度，确保CSS属性正确设置。

问题：多行文本截断不生效

原因：

浏览器兼容性问题：某些浏览器可能不完全支持-webkit-line-clamp属性。
CSS选择器错误：确保CSS选择器正确应用于目标元素。

解决方法：使用浏览器兼容性较好的CSS属性，如display: block; overflow: hidden; text-overflow: ellipsis;结合height和line-height来控制多行文本截断。

参考链接

通过以上信息，您可以更好地理解和应用CSS文字截断技术，解决相关问题。

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

有帮助

没帮助

角材料.带有选择文本截断的列表

css、angular、angular-material

我试图使用的角度材料列表与复选框，但与文本需要截断，而不是文字包装(由于UI空间的限制)。我把这个例子分叉在角质材料的位置上来说明这个问题。文本有点截断，但不是用椭圆或我希望/期待的。css忍者能帮上忙吗？我希望每一行都以“.”结尾在复选框之前。我有文本截断:省略和空白:现在的CSS

浏览 2提问于2022-06-07得票数 0

2回答

截断行号N上的文本

css、sass

截断特定行上的文本(或线夹)的最佳方法是什么？这是可能的通过CSS还是我需要其他的东西？

浏览 2提问于2016-05-13得票数 2

回答已采纳

1回答

将字符串截断为单词和框大小

php、jquery、html、css

有没有一种方法可以截断字符串以适合特定的框大小，并且只保留完整的单词？CSS解决方案将截断为框大小，但会打断文字： overflow: hidden;

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

1回答

Javascript:如何修改JS以调整背景图像的大小以停止截断边缘？

javascript、css、background-image

我目前在我的Rails5应用程序的样式表中有以下CSS。这是我在app/assets/javascripts/application.js中的JS，它工作得很好，只是稍微截断了图像的右边缘。('background-size', screenWidth+'px '+screenHeight + 'px'); 我还尝试了下面的方法，它也会稍微截断图像的右边缘。$('#intro').css('backgro

浏览 2提问于2017-10-25得票数 0

6回答

截断文本并在CSS中添加省略号

css、ellipsis

我试图截断一段文本，并在后面添加省略号，以表示有更多的内容。我尝试使用CSS属性text-overflow:ellipsis --但是看一看这方面的例子，似乎只能使用no-wrap，因此只能在单行文本上使用，因此不适合截断段落。因此，我没有使用ellipsis属性截断，而是通过使用overflow:hidden和设置max-height来截断老式的方法。但是它是必需的，因为它是用来控制截断文本的！省略号(如果您去掉overflow:hidden)显示在文本的下面。我需要它看起来像是

浏览 13提问于2013-07-18得票数 10

1回答

被按下并根据上面的文本数量截断的文本

html、css

下面的文字应该更长或更短，取决于上面的标题。 var divh=$('#fos').height(); while ($(p).outerHeight(

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

回答已采纳

1回答

文本被隐藏，但我找不到css中的位置

css

这个页面上的成功故事( --特别是马克的第二个)的文字被切断了。我在overflow上发现了一个实例:隐藏在主css样式表和插件文件中。当我删除它的时候没有什么变化，所以我又把它加回去了。你知道为什么文本被截断了吗？谢谢!

浏览 3提问于2013-04-02得票数 0

回答已采纳

3回答

多行文本截断

javascript、jquery、html、css

有没有人知道一种干净利落的方法，可以把一段文字截断成两行。这就是我要截断的内容(p元素)：我尝试了各种解决方案，包括clamp.js (在提供的示例中它甚至不能正常工作)我尝试了使用文本溢出的CSS3解决方案，但这些解决方案只截断到一行。如果有必要，我很乐意更改标记，我只是希望能够截断文本以适合div框中的两行，并以省略号(..

浏览 1提问于2012-02-12得票数 0

回答已采纳

2回答

截断文本并显示在鼠标上

javascript、jquery、html

我需要截断这段文字(用.最后，在鼠标上方，整个文本应该被展开。我试图用下面的代码截断。这段代码的问题是，它在单击...时扩展了内容，但是当用户鼠标移动到p标记上的任何地方时，我需要打开它。PS:不需要CSS解决方案，因为它不兼容所有浏览器(IE7).

浏览 3提问于2014-08-12得票数 3

回答已采纳

1回答

在没有滚动条的情况下，如何实现对具有“文本溢出:省略”的文本拖动功能的水平滚动？

javascript、jquery、html、css、scroll

我有几行文字，每一行都包装在固定宽度的段落标签中.它们的长度不同。因此，我用“文本溢出:省略”截断行，并用“溢出:隐藏”隐藏滚动条。<p>This line is a little bit longer</p>CSS是一个带有默认滚动条的jsfiddle，它允许我进行滚动，而是一个带有“溢出:隐藏”属性的jsfiddle，它可以按照我需要的方式截断

浏览 1提问于2015-12-01得票数 0

回答已采纳

2回答

如何在移动设备上使用CSS截断文本

css、responsive-design、truncate

是否有通过CSS根据当前屏幕大小/媒体查询截断文本的方法？例如，我有一段文字：Lorem ipsum dolor sit amet, consectetur adipiscing elit.所以只有一行文字会显示出来。我只是想显示这么多的字母，基于

浏览 2提问于2018-02-12得票数 1

回答已采纳

1回答

截断中文文本

php、character-encoding、truncate、substr、ucfirst

我们的网站是中文的，主页的一部分显示了其他页面标题的列表，最大长度是所谓的'26‘(如果中文字符是用英语书写的，我假设这是使用英文字符数？)。我们使用的代码行是：然而，如果标题确实太长，代码就会截断它，但最后两个中文字符总是显示为��，因为我猜它使用的是英文版本的单词，并以某种方式拆分了一个中文字符。也许我想太多了！？在国内做一个尊重艺术，能够为青年导演提供平在国内做一个尊重�� 你能不能建议修改一下，在不产生��的情况下

浏览 5提问于2012-06-07得票数 7

回答已采纳

2回答

如何在网格中启用描述字包装(XUL)

firefox-addon、xul、dtd

在描述中，我似乎无法得到任何形式的文字包装。如果我将描述从表面板中移出，它将很好地包装。但是，如果它在表面板中，则会被截断(截断)。我在没有平板的网格中尝试了同样的方法，但也遇到了同样的问题。我怎样才能在描述中得到文字包装？

浏览 1提问于2012-11-28得票数 0

回答已采纳

2回答

如何根据屏幕分辨率截断文本

css

我想根据屏幕分辨率截断文本。<p>{$category->description}</p> </div>这样的代码允许显示被截断为我试图找到css的方式，如这里所描述的：我预先感谢你的阅读和任何帮助。帕特里克

浏览 0提问于2018-06-06得票数 0

2回答

iOS:截断一个大字符串，并追加一个后缀字符串

ios、uitextfield、uilabel

我需要用两行显示一些文字。-字符串.-后缀字符串如何在iOS中实现？

浏览 2提问于2015-08-18得票数 0

1回答

当文字较大时，文字会被截断吗？

android、android-layout、android-linearlayout、android-screen-support、android-layout-weight

<?xml version="1.0" encoding="utf-8"?> android:id="@+id/listitem_contact" android:layout_height="wrap_content&

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

1回答

截断两个跨度之间的跨度

css、truncation

我正在尝试做的是:我在卡片下有一个内容div，它应该包含标题的跨度，一个简短的描述跨度(必须截断)和一个价格跨度。我希望内容div是最大的2行文字高，只有跨度的描述需要被截断。width: auto; font-weight: 500;<head> <link rel="stylesheet" type="text/css" href="https://githu

浏览 1提问于2017-04-28得票数 0

2回答

1位十六进制的最大值

hex、verilog

1'hF还是1'h1？我猜1'hF是不正确的，4'hF是必需的，因为1比特不足以容纳十六进制？

浏览 5提问于2020-09-11得票数 0

3回答

合同中的溢出是如何处理的？

solidity、security、evm、overflow

可靠的医生说：数字文字表达式保持任意精度，直到它们被转换成非文字类型(即，将它们与非文字表达式一起使用)。这意味着计算不会溢出，而除法不会在数字文字表达式中截断。

浏览 0提问于2017-08-08得票数 3

6回答

journalctl:如何防止终端中的文本截断

terminal、systemd

如何防止长字符串在终端中截断？例如，如果我跑有很多我看不懂的文字。我愿意使用其他程序/工具。

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

回答已采纳

点击加载更多

css文字截断