h5文字超出，两行显示，超出显示省略号

最新推荐文章于 2024-07-10 16:10:21 发布
最新推荐文章于 2024-07-10 16:10:21 发布
阅读量1.5k 收藏
点赞数 1
CC 4.0 BY-SA版权
分类专栏： css 文章标签： css
原文链接：https://www.cnblogs.com/windseek/p/10577239.html
本文介绍了一种使用CSS实现商场导航文字显示最多两行并以省略号结尾的方法。通过设置特定的CSS样式，如宽度、高度、浮动、背景颜色等，实现了文字的垂直居中和文本溢出时的省略号效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

 

最近接到一个需求，要求商场导航里的文字最多显示两行，超出两行的省略号显示，查一些资料，又根据自己的需求，改了很多，直接上代码吧

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

<html>

    <head>

        <style type="text/css">

            .main{

                width: 360px;

                border: 1px solid #ccc;

                overflow: hidden;

            }

            .child{

                float: left;

                height: 40px;

                overflow: hidden;

                padding: 10px;

                background-color:blanchedalmond;

                margin: 10px;

            }

            .itemWrap{

                display:table-cell;              

                vertical-align: middle;

                text-align: center;

                height: 40px;

            }

            .item{

                font-size: 12px;

                font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;

                overflow:hidden;

                width: 80px;

                text-overflow:ellipsis;

                display: -webkit-box;

                -webkit-box-orient: vertical;

                -webkit-box-pack: center;

                -webkit-box-align: center;

                -webkit-line-clamp:2;

                overflow: hidden;

            }

        </style>

    </head>

    <body>

        <div class="main">

            <div class="child">

                <div class="itemWrap">

                    <div class="item">

                        测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据

                    </div>

                </div>

            </div>

            <div class="child">

                <div class="itemWrap">

                    <div class="item">

                        测试数据

                    </div>

                </div>

            </div>

            <div class="child">

                <div class="itemWrap">

                    <div class="item">

                        测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据

                    </div>

                </div>

            </div>

            <div class="child">

                <div class="itemWrap">

                    <div class="item">

                        测试数据

                    </div>

                </div>

            </div>

            <div class="child">

                <div class="itemWrap">

                    <div class="item">

                        测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据

                    </div>

                </div>

            </div>

            <div class="child">

                <div class="itemWrap">

                    <div class="item">

                        测试数据

                    </div>

                </div>

            </div>

            <div class="child">

                <div class="itemWrap">

                    <div class="item">

                        测试数据

                    </div>

                </div>

            </div>

            <div class="child">

                <div class="itemWrap">

                    <div class="item">

                        测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据

                    </div>

                </div>

            </div>

        </div>

    </body>

</html>

效果图如下：

child主要是控制padding和背景颜色，浮动，itemwrap主要是为了垂直居中，item是真正的省略号实现；

注：在less里引入时，一定要记得不要编译-webkit开头的东西，加上less注释就好了

/*! autoprefixer: off */

-webkit-box-orient: vertical;

/*! autoprefixer: on */

Vue完成数据请求后内容超出显示省略号+显示查看全文按钮
Akikang的博客
12-26 3534
需求： 如下图，当Vue完成数据请求后，根据文章内容设置显示方式。10行以内的显示全文，不显示【查看全文】按钮；内容超过指定行数时，超出内容隐藏，末尾显示省略号并显示【查看全文】按钮。 实现 思路 在异步请求数据完成后，判断文章内容所在元素高度。根据元素高度控制元素class和按钮显示。 实践 //给文章内容元素设置ref ；绑定class样式hide_des...
一行内容显示,超出用省略号,hover显示全部内容
gongliming_qd的博客
01-19 1839
样式效果 父组件调用 <Tool-tip :content="content"></Tool-tip> 子组件 <template> <el-tooltip :content="content" placement="bottom-start" effect="dark" :disabled="isDisabled"> <div class="contentnowrap" :class="{isLink: 'link-text
H5页面设置文本超过两行时显示省略号失效
周凤伟的博客
10-26 929
在下面的代码中加行注释就可以了 overflow:hidden; text-overflow:ellipsis; display:-webkit-box; /*! autoprefixer: off */ -webkit-box-orient:vertical; -webkit-line-clamp:2;
H5+Css3文本溢出添加省略号（包括插件）
qq_34082921的博客
10-07 1877
webkit-line-clamp用来限制在一个块元素显示的文本的行数。限定了在第几行后面增加省略号。使用webkit的css扩展属性（webkit是私有属性）-webkit-line-clamp。因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端。将height设置为line-height的整数倍，防止超出的文字露出。：文本需要使用p标签或div标签，span不行。
HTML5CSS3多行文本溢出显示省略号
m0_63171030的博客
04-19 114
【代码】HTML5CSS3多行文本溢出显示省略号。
当页面内容溢出或超出边界时显示省略号
11-15 1588
使用CSS实现，当内容过多超出边界时，以省略号（…）的形式进行展现，下面通过代码来进行说明： <!DOCTYPE html> <html> <head> <title>内容超出边界用省略号显示Demo1</title> <style type="text/css"> ...
随手记：div内容换行和不换行处理，内容超出省略号处理
weixin_63515766的博客
07-10 1659
div内容换行和不换行处理，内容超出省略号处理
判断文字超过2行添加展开按钮，未超过则不显示，溢出部分显示省略号
11-30
多行溢出省略Css： overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; 设计是这样的。。 点击展开.png 点击收起.png 接下来我来...
h5文本+图标的格式，图标跟随在文本末尾，文本超出两行显示省略号，文本显示省略号时图标仍然未显示状态
08-14
要实现文本在超出两行时显示省略号，需要结合`-webkit-line-clamp`、`-webkit-box-orient`、`display: -webkit-box`等属性。这些属性可以限制文本显示的行数，并在超出时添加省略号。 3. **图标始终隐藏** 要使...
CSS实现小图标跟随文本(多行文本省略时显示在省略号后面)
java_wzh123的博客
04-21 8325
CSS实现小图标跟随文本(多行文本省略时显示在省略号后面) 1、应用场景 在一个多行省略的文本中，要求文本后显示一个小图标，且触发了多行文本省略后，小图标依然显示在省略号后面。如下图： 2、实现代码 html代码如下： <div class="container"> <div class="content-wrapper"> <div class="content"> <!--小图标1(文本超出隐藏后显示)-->
h5端css文本溢出加省略号
静如雪的博客
01-17 467
记录一下 单行文本溢出 p{ width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 多行文本溢出 p{ width: 100%; overflow: hidden; text-ove...
css样式 h5页面内容过长自动换行和多余用省略号...表示
小于零等于二的博客
01-02 2809
问题：当内容为中文时会自动换行，单内容是数字或字母组成不会自动换行 方案如下： .***{ word-wrap: break-word; }
html5 文字自动省略,html中把多余文字转化为省略号的实现方法方法
AAAXiaoApple的博客
10-18 1065
html5 文字自动省略,html中把多余文字转化为省略号的实现方法方法
EasyCVR平台手机端H5页面系统名称过长导致显示异常的情况优化
EasyCVR视频融合云平台的技术博客
06-06 150
结合AI智能分析网关，能实现人脸检测、人脸识别、车辆检测与识别、烟火识别、危险区域闯入检测、安全帽检测、消防通道占压检测、离岗睡岗检测等。
移动端h5常用样式（11px文字、文字超出显示...、文字上下左右居中）
qq_32886245的博客
04-22 1305
11px大小的文字 .mini-font{ font-size: 12px; -webkit-transform-origin-x: 0; -webkit-transform: scale(0.92); transform: scale(0.92); } 文字超出显示… 这里超出显示...的文字，与其他文字在同一行，所以用的是flex布局+max-width属性 .box{ margin-top: 20px; display: flex; font
html中文本超过部分盒子部分用省略号显示如何操作
小魏快起床的博客
11-25 1370
html中文本超过部分盒子部分用省略号显示如何操作
H5 自适应正方形图片与文字溢出产生省略号
humanyr的博客
09-24 560
1.正方形图片：有时候前端获取到的图片大小不一样，固定宽高会变形，不固定宽高排版又会乱，所以要求图片不变形的情况下正方形展示，这样也不影响排版 代码如下： <div> <div class="image-wrapper"> <img src="/assets/img/bg-middle.jpg"> </div> </div> .image-wrapper { position: relative;
html5数据超出显示省略号,h5文字超出，两行显示，超出显示省略号
weixin_39987926的博客
06-07 2290
最近接到一个需求，要求商场导航里的文字最多显示两行，超出两行的省略号显示，查一些资料，又根据自己的需求，改了很多，直接上代码吧.main{width: 360px;border: 1px solid #ccc;overflow: hidden;}.child{float: left;height: 40px;overflow: hidden;padding: 10px;background-col...
h5文本，文本超出1.5行显示省略号
最新发布
08-14
实现文本超过1.5行显示省略号的效果在H5页面中，可以通过使用CSS的 `-webkit-line-clamp` 属性来达到目的。这个属性允许你限制在一个块容器中显示的文本行数，并且当文本溢出时显示省略号。下面是具体的实现方法： ### 实现代码 ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> .text-ellipsis { display: -webkit-box; /* 将对象作为弹性伸缩盒子模型显示 */ -webkit-box-orient: vertical; /* 设置或检索伸缩盒对象的子元素的排列方式为垂直方向 */ -webkit-line-clamp: 2; /* 限制显示的文本行数，这里设置为2行，如果需要1.5行，可以调整为2，因为CSS不支持小数 */ overflow: hidden; /* 内容超出宽度时隐藏超出部分的内容 */ text-overflow: ellipsis; /* 当对象内文本溢出时显示省略标记(...) */ line-height: 1.5; /* 设置行高，以便更好地控制文本的垂直间距 */ max-height: calc(1.5em * 1.5); /* 计算最大高度，1.5行的高度 */ } </style> </head> <body> <div class="text-ellipsis"> 这是一段可能会超出容器的文本内容，我们希望在超过1.5行时显示省略号。这段文本将会被限制在指定的行数内显示，超出部分会被隐藏，并且显示省略号。 </div> </body> </html> ``` ### 解释 - **`display: -webkit-box;`**：将对象作为弹性伸缩盒子模型显示。 - **`-webkit-box-orient: vertical;`**：设置或检索伸缩盒对象的子元素的排列方式为垂直方向。 - **`-webkit-line-clamp: 2;`**：限制显示的文本行数。这里设置为2行，因为CSS不支持1.5行，所以可以适当调整。 - **`overflow: hidden;`**：内容超出宽度时隐藏超出部分的内容。 - **`text-overflow: ellipsis;`**：当对象内文本溢出时显示省略标记(...)。 - **`line-height: 1.5;`**：设置行高，以便更好地控制文本的垂直间距。 - **`max-height: calc(1.5em * 1.5);`**：计算最大高度，1.5行的高度。 通过上述代码，可以在H5页面中实现文本超过1.5行后显示省略号的效果。需要注意的是，`-webkit-line-clamp` 属性在某些浏览器中可能不被支持，因此在实际应用中可能需要添加更多的兼容性处理[^3]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值