资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/h5文字超出，两行显示，超出显示省略号

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

summerpxy / 2569人阅读

摘要：预期目标文字最多显示两行，超出两行的省略号显示实现方案测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数

预期目标：文字最多显示两行，超出两行的省略号显示
实现方案：`


    


    

        

            

                

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

            

        

        

            

                

                    测试数据
                

            

        

        

            

                

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

            

        

        

            

                

                    测试数据
                

            

        

        

            

                

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

            

        

        

            

                

                    测试数据
                

            

        

        

            

                

                    测试数据
                

            

        

        

            

                

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

`
最终效果：

细节描述：
text-overflow:ellipsis 控制省略号
-webkit-line-clamp:2 控制行号

感觉对你有用的话，打赏一下哈：

云服务器 GPU云服务器 html超出显示滚动 html省略显示 js 最多显示两行 控件超出屏幕

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/106433.html

相关文章

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

    摘要：预期目标文字最多显示两行，超出两行的省略号显示实现方案测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数 预期目标：文字最多显示两行，超出两行的省略号显示实现方案：` .main{ width: 360px; borde...

    longmon 评论0 收藏0

  • 多行或者单行文本超出显示点点点，如果保证内容始终垂直居中？

    摘要：我现在的需求是这样的，我目前实现了一个框，显示文字，超出两行显示，如果单行要保证垂直居中，我如果给容器使用则当文字内容过多的时候会不上下文字有截断现在效果如下只能显示两行，超出显示省略号解决方法垂直居中的我现在的需求是这样的，我目前实现了一个div框，显示文字，超出两行显示...，如果单行要保证垂直居中，我如果给容器使用display:flex;align-items:center；则当文字...

    sydMobile 评论0 收藏0

  • 【CSS】超出两行显示省略号

    摘要：看到了个问题，问题地址目前没想到怎样不用行高解决问题，但是想到了之前工作中遇到的文本超出两行显示省略号，所以从之前的代码里翻出代码段记录下来，便于之后使用。 看到了个问题，问题地址：https://segmentfault.com/q/10...目前没想到怎样不用行高解决问题，但是想到了之前工作中遇到的文本超出两行显示省略号，所以从之前的代码里翻出代码段记录下来，便于之后使用。 ...

    cartoon 评论0 收藏0

  • 【CSS】超出两行显示省略号

    摘要：看到了个问题，问题地址目前没想到怎样不用行高解决问题，但是想到了之前工作中遇到的文本超出两行显示省略号，所以从之前的代码里翻出代码段记录下来，便于之后使用。 看到了个问题，问题地址：https://segmentfault.com/q/10...目前没想到怎样不用行高解决问题，但是想到了之前工作中遇到的文本超出两行显示省略号，所以从之前的代码里翻出代码段记录下来，便于之后使用。 ...

    bingchen 评论0 收藏0

发表评论

登陆后可评论

0条评论

summerpxy

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<