css中要求文字必须是一行，超出部分自动隐藏的问题

最新推荐文章于 2024-02-20 15:30:56 发布

原创最新推荐文章于 2024-02-20 15:30:56 发布 · 3k 阅读

3 ·

CC 4.0 BY-SA版权

编程专栏收录该内容

54 篇文章

订阅专栏

本文介绍了一种利用CSS实现文本一行显示并自动隐藏超出部分的方法，通过设置white-space、overflow及text-overflow属性，确保文本不会超出指定的宽度。

问题：客户要求文字必须是一行，超出部分自动隐藏。而现在没有办法在php里控制截取字数，只能在前端css里处理。

首页div的宽度是一定的。

处理办法为：

word-break: keep-all;/*这个可以不要*/

word-wrap: break-word;
white-space: nowrap;/*强制不换行，如果没有此行，则当用鼠标滑过的效果时，有可能会出现，因为超出的部分已经漂浮到其他的div上了*/
overflow: hidden;/*自动隐藏文字*/

text-overflow: ellipsis;/*文字隐藏后添加省略号，如果不想用，可以省略此项*/

width: 20em;/*不允许出现半汉字截断*/

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

fariy086

关注关注

0
点赞
踩
3

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

css 实现文字过长自动隐藏功能

09-24

CSS 提供了一些方法来实现这一目标，即当文本超出指定长度时自动隐藏多余部分。这里我们将详细介绍如何使用 CSS 来实现单行和多行文字的自动隐藏功能。首先，我们来看单行文字的自动隐藏。这种方法适用于只有一行...

基于JavaScript实现文字超出部分隐藏

10-22

这个示例中，我们将讨论如何使用JavaScript来实现文字超出部分隐藏的功能。首先，我们看到HTML结构中包含了两个`<div>`元素，它们都有不同的类名（`.text` 和 `.text1`）。这两个`<div>`分别包含了两段文字，其中`...

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

【CSS】一行超出...隐藏，两行超出...隐藏

Shaoyouiqng的博客

09-26

1174

美丽的UI小姐姐总是让你…展示，不知道有什么是见不得人的，那我今天帮你做个遮羞布一行超出…展示 overflow: hidden; white-space: nowrap; text-overflow: ellipsis; 差不多就是这样的效果，我这里展示的是车牌一行超出…展示 width:300px // 这个宽度要确定才可以给你隐藏 text-overflow ellipsis display -webkit-box -webkit-line-clamp 2 -webkit-box-orie.

CSS设置一行文字，超出部分自动隐藏

余浩的博客

07-16

5363

CSS设置一行文字，超出部分自动隐藏 .text{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

css 一行内显示超出自动隐藏

doublesmile的专栏

08-19

9400

<br />看到标题你一定很轻易就会想到截断文字加“...”的做法。哈哈，就是这样。其实写这篇日志也只是把这样方法做个记录，因为似乎还有很多人不记得碰到这样的情况该如何处理。<br /><br /><br /> 　　一般的文字截断（适用于内联与块）：<br /><br /> Example Source Code [www.mb5u.com]<br /> .text-overflow {<br /> display:block;/*内联对象需加*/<br /> width:31em;<br />

css文本超出隐藏

weixin_70348294的博客

09-15

5061

使用text-overflow:ellipsis;当文本对象溢出是显示为省略号。可以使用overflow:hidden;来把超出的部分隐藏，2.超出两行甚至多行，隐藏文本并显示省略号。1.超出一行，隐藏文本并显示省略号。

css实现单行文本超出隐藏和多行文本超出隐藏

HHYZBC的博客

10-06

1269

webkit-line-clamp 用来限制在一个块元素显示的文本的行数,这是一个不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中；这种方法只有-webkit内核才有作用，而移动端浏览器绝大部分是WebKit内核的，所以该方法适用于移动端；

html设置超出自动隐藏,css如何设置超出部分隐藏

weixin_34320235的博客

06-01

6210

CSS 一段文本怎么设置超过省略号显示单行文本实现方法：实现效果：多行文本溢出显示省略号实现方法：实现效果：适用范围：因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；扩展资料： -webkit-line-clamp用来限制在一个块元素显示的文本的行数。在标签中，想要实现文字超出就隐藏，CSS怎么写？需要准备的材料分别有：电脑、浏览器、html编辑器。首先，...

用css截取字符实现文字自动截断隐藏溢出文本

09-25

在网页设计中，文字内容在容器中完整显示是一种基本需求，但有时我们希望在内容超出容器宽度时自动隐藏多余的文本，仅显示前一部分，并以省略号（…）代替被隐藏的内容，这就是文字自动截断隐藏溢出文本的功能。...

CSS一行/多行显示超出隐藏

热门推荐

01-10

2万+

文字一行显示，超出隐藏 overflow:hidden; text-overflow:ellipsis; white-space:nowrap; 多行文字显示，超出隐藏 overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; ...

CSS 超出隐藏

weixin_45561885的博客

08-09

1185

2、超出两行甚至多行，隐藏文本并显示省略号。1.超出一行，隐藏文本并显示。

css超出隐藏

木槿之夏

09-20

1730

CSS多行文字超出隐藏加省略号 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 限制行数 overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertica...

css文字超出隐藏

finishUp的博客

10-10

417

css文字超出隐藏

css设定文本超出一行或多行就隐藏并显示省略号

YinghaoGuo的博客

03-02

1万+

这里要说的是文本超出多行才隐藏文字并且显示省略号而不是超出一行就省略。首先大家要了解一些基本的文本文字属性的设定，例如white-space(超出是否换行)，letter-spacing（字间距），text-overflow（文字超出如何显示），word-wrap（允许长单词或 URL 地址换行到下一行），overflow（超出块范围如何显示）等等... 首先看一下超出

文字超过一行的时候隐藏并用...替代（css实现）

chongchong1325的博客

08-24

820

今天在项目中碰到了个问题，当文字超过一行的时候隐藏文字并用...代替，刚开始想着是用文字的字数进行限制的，想着用过滤器实现。后来又想到元素所包含的文字字数是不确定的，这种方法行不通，咨询了一下同事，知道了可以直接用css实现，记录一下。啥也不多说了，直接上代码 .issueInfo_news_con p{ word-break:break-all; text-overflow

文字超出隐藏

baiao8753的博客

08-13

1829

　　1.单行文字 <html> <head> <meta charset="utf-8"> <style> #row{ display: block; /* 必备的四个条件 */ ...

css文本的超出以...隐藏显示

m0_56276571的博客

02-20

1248

css文本的超出以...隐藏显示

文字超出一行css

最新发布

07-04

在CSS中处理文字超出一行的情况时，通常有以下两种需求：**截断文本并显示省略号**或**自动换行**。这两种方式可以根据具体场景选择不同的属性组合实现。 ### 截断文本并显示省略号当希望文本在一行内展示，并且超出部分以省略号（`...`）形式表示时，可以使用 `text-overflow: ellipsis` 属性。为确保该效果生效，还需要结合其他属性共同设置： - `white-space: nowrap`：防止文本换行。 - `overflow: hidden`：隐藏超出容器的内容。 - `text-overflow: ellipsis`：在文本溢出时显示省略号。示例代码如下： ```css .text-box { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; } ``` 上述代码确保了文本在宽度超过 `200px` 时会被截断，并显示省略号[^3]。 ### 自动换行如果需要文本在超出容器宽度后自动换行，而不是保持在一行内，可以通过以下属性实现： - `word-wrap: break-word`：允许长单词或URL地址在容器内换行。 - `word-break: break-all`：强制在任意字符间断开，适用于连续无空格的文本（如长英文单词或URL）。 - `overflow: hidden`：隐藏超出容器的内容（可选）。示例代码如下： ```css .text-wrap { width: 200px; word-wrap: break-word; word-break: break-all; } ``` 通过以上设置，即使遇到很长的字符串也能自动换行，避免内容溢出容器[^2]。 ### 多行文本截断并显示省略号如果希望文本在多行（例如三行）后被截断并显示省略号，可以借助 `-webkit-line-clamp` 属性。这种方式依赖于 `-webkit-box` 模型，适用于现代浏览器。示例代码如下： ```css .multi-line-ellipsis { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; text-overflow: ellipsis; width: 200px; } ``` 这段代码限制了文本最多显示三行，超出部分将被隐藏，并在末尾显示省略号[^2]。 ### 垂直居中与文本换行结合使用在某些情况下，可能需要将文本垂直居中同时支持自动换行。可以通过 `inline-block` 和辅助元素实现垂直居中，同时允许文本根据容器大小自动换行。示例代码如下： ```html <div class="outDiv"> <span class="innerDiv1">多行文字自动换行居中</span> <span class="innerDiv-fix"></span> </div> ``` ```css .outDiv { border: 1px solid black; width: 200px; height: 200px; text-align: center; overflow: hidden; } .outDiv .innerDiv1 { display: inline-block; vertical-align: middle; } .outDiv .innerDiv-fix { display: inline-block; width: 0; height: 100%; line-height: 100%; vertical-align: middle; visibility: hidden; } ``` 此方法利用两个 `inline-block` 元素实现垂直居中，其中 `.innerDiv1` 存放实际文本内容，`.innerDiv-fix` 作为占位符帮助对齐，从而实现文本在容器内的垂直居中和自动换行[^1]。