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

最新推荐文章于 2023-06-06 17:52:22 发布
最新推荐文章于 2023-06-06 17:52:22 发布
阅读量1.3k 收藏
点赞数 1
分类专栏： css 文章标签： css
原文链接：https://www.cnblogs.com/windseek/p/10577239.html
版权

 

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

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 */

张不不
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
小程序和H5怎么让文本只显示两行！超出后以...省略号显示！
Zan_Z的博客
05-11 696
这里写自定义目录标题小程序新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 小程序 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一
css样式 h5页面内容过长自动换行和多余用省略号...表示
小于零等于二的博客
01-02 2660
问题：当内容为中文时会自动换行，单内容是数字或字母组成不会自动换行 方案如下： .***{ word-wrap: break-word; }
H5页面设置文本超过两行时显示省略号失效
周凤伟的博客
10-26 810
在下面的代码中加行注释就可以了 overflow:hidden; text-overflow:ellipsis; display:-webkit-box; /*! autoprefixer: off */ -webkit-box-orient:vertical; -webkit-line-clamp:2;
h5端css文本溢出加省略号
静如雪的博客
01-17 422
记录一下 单行文本溢出 p{ width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 多行文本溢出 p{ width: 100%; overflow: hidden; text-ove...
EasyCVR平台手机端H5页面系统名称过长导致显示异常的情况优化
最新发布
EasyCVR视频融合云平台的技术博客
06-06 92
结合AI智能分析网关，能实现人脸检测、人脸识别、车辆检测与识别、烟火识别、危险区域闯入检测、安全帽检测、消防通道占压检测、离岗睡岗检测等。
html5 文字自动省略,html中把多余文字转化为省略号的实现方法方法
weixin_31854817的博客
05-30 1838
在html中如果要把多余的文字显示为省略号，那么有以下几种方法：单行文本：Document.box{width: 200px;background-color: aqua;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;}讲的是克辣椒的洒落看见斯科拉讲的是拉开讲的是了卡机快来撒建档立卡时间到了撒快乐到家撒了看见撒快乐到家撒健...
判断文字超过2行添加展开按钮，未超过则不显示，溢出部分显示省略号
11-30
多行溢出省略Css： overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; 设计是这样的。。 点击展开.png 点击收起.png 接下来我来...
最全H5大数据显示，投屏.rar（60套）
06-07
总的来说，"最全H5大数据显示，投屏.rar"是一份宝贵的资源，它集合了多种H5大数据可视化解决方案，适合数据分析人员、前端开发者或者任何需要将复杂数据转化为生动可视化界面的用户。通过学习和利用这些模板，可以极...
安卓端H5页面的emoji表情显示处理
10-12
在安卓端开发H5页面时...总之，处理Android端H5页面的emoji表情，关键在于理解emoji的Unicode编码和跨平台显示问题，通过适当的编码解码策略，结合JavaScript工具类或第三方库，可以确保emoji在不同环境下的正确显示。
mui,h5+中实现控制页面load显示 <font color=red>原创</font>
08-28
mui,h5+ 中实现控制页面load显示 在混合APP的开发中，加载页面是一个非常重要的步骤，因为混合开发部像是原生app，很多都需要提前加载数据，或者留出加载数据的时间，一个号的LOAD可以让APP更加的人性化，体验更加...
android调用H5显示加载中效果的示例代码
08-29
Android调用H5显示加载中效果的示例代码 在Android开发中，为了提高用户体验，通常需要在加载H5页面时显示加载中效果，以便让用户知道当前页面的加载状态。本篇文章将详细介绍如何在Android中调用H5显示加载中效果...
H5 自适应正方形图片与文字溢出产生省略号
humanyr的博客
09-24 481
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 2092
最近接到一个需求，要求商场导航里的文字最多显示两行，超出两行的省略号显示，查一些资料，又根据自己的需求，改了很多，直接上代码吧.main{width: 360px;border: 1px solid #ccc;overflow: hidden;}.child{float: left;height: 40px;overflow: hidden;padding: 10px;background-col...
h5显示两行文字，溢出的隐藏
weixin_60591474的博客
08-09 623
h5显示两行文字，溢出的隐藏
h5中p的省略号效果
qq_17724007的博客
12-26 493
效果： p标签中省略号的效果 html代码： &lt;p class="name"&gt;请问请问请问请问请问qw科技有限公司&lt;/p&gt;   css代码： .name { font-size：xxxrem; overflow: hidden; text-overflow: ellipsis; // 显示省略符号来代表被修剪的文本。 white-space: no...
css省略、Css实现单行、多行文本溢出显示省略号 …以及H5常见省略场景
西门吹雪
02-09 9655
#####场景一：对文案显示字数没有要求:直接css控制省略 单行文本的溢出显示省略号 //一行省略 .one-line{ overflow: hidden; text-overflow:ellipsis; white-space: nowrap } //两行省略 .two-line{ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; //元素显示的文本的行
html 中的div或者span或者p标签文本超出宽度不会自动换行 span设置不了margin的原因
hzxOnlineOk的博客
09-01 1359
html 中的div或者span或者p标签文本超出宽度不会自动换行的原因 .am-list-item .am-list-line .am-list-extra { flex-basis: 60%; white-space: no-wrap; // 就是这行导致的 } span设置不了margin（非块元素需要设置display: 'inline-block',） <span style={{ display: 'inline-block', color: 'red',..
html文本溢出显示省略号(...)
程序员_R的专栏
10-22 6089
多行文本溢出显示省略号(...) overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; 单行文本溢出显示省略号(...)white-space:nowrap; overflow:hidden; text
css省略号在火狐浏览器下不兼容的问题
疑问 搜索 动手 解决 记录
02-03 631
最近涨了一个关于css省略号的知识 写一下总结,方便以后回忆起来 一个很基本的知识点, 导航栏超出限制字数后显示省略号 通用限制写法 /* 显示一行，省略号 */ white-space: nowrap; text-overflow: ellipsis; overflow: hidden; word-break: break-all; /* 显示两行，省略号 */ text-overflow: -o-ellipsis-lastline; overflow:
h5判断div中的内容超出两行
05-20
可以通过以下方式来判断一个 div 中的内容是否超出了两行： 1. 获取该 div 的高度和行高，计算出它可以显示的最大行数。 2. 获取该 div 中的文本内容。 3. 将文本内容插入到一个隐藏的 span 元素中，并设置其宽度为...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值