【CSS】使用CSS控制文字过多自动省略号-阿里云开发者社区

开发者社区> angel挤一挤> 正文

【CSS】使用CSS控制文字过多自动省略号

简介: 使用CSS可以设置一下样式: u,small{ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -...
+关注继续查看

使用CSS可以设置一下样式:

<style>
        u,small{

            overflow: hidden;

            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient:vertical;
        }
    </style>

对<u>标签和<small>标签都是用这个样式

                <div class="row">
                                <div class="alert alert-info">
                                    <div class="row">
                                        <div class="col-lg-8 col-sm-12 col-md-12 col-xs-12 text-left">
                                            <input type="hidden" name="adminId"/>
                                            <u name="adminName" style="text-overflow:ellipsis;">机构名称机构名称机构名称机构名称机构名称机构名称机构名称机构名称</u>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-lg-6 col-sm-6 col-md-6 col-xs-6 text-left">
                                            <input type="hidden" name="productId"/>
                                            <small name="productName">产品名称产品名称产品名称产品名称产品名称</small>
                                        </div>
                                        <div class="col-lg-6  col-sm-6  col-md-6  col-xs-6 text-right">
                                            <small><em>12.3</em>&nbsp;折扣价</small>
                                        </div>
                                    </div>
                                </div>
                            </div>

效果如下:

 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
【CSS】使用CSS控制文字过多自动省略号
使用CSS可以设置一下样式: u,small{ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -...
1008 0
一种高效自动化ECS实例数据盘挂载和格式化方式
默认情况下创建的 ECS 实例只有一个40G 的高效云盘系统盘,通过任何形式(控制台、ECS SDK 等) 方式创建的实例,如果需要使用数据盘,必须先进行额外的格式化数据盘工作。 如果需要批量创建大量的有特定格式化需求数据盘的 ECS 实例,那么单独为每一台实例格式化数据盘肯定是一件浪费运维资源的工作。
1782 0
WEB-UI自动化测试实践
为了满足多页面功能及流程的需求及节省工时,设计了这款UI 自动化测试程序,旨在提供接口,集成到蜗牛自动化测试框架,方便用例的设计。
2549 0
使用 CSS3 动画实现的 3D 图片过渡特效
  这是一个基于 CSS3 动画实现的图片过渡效果,共有 Flip、Rotation、Multi-flip、Cube、Unfold 等6种效果,它们将证明 CSS3 Transform 和 Transition 属性的强大能力。
898 0
+关注
angel挤一挤
【任何0基础都能看懂的步骤和解决方法!】
340
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载