开发者社区开发与运维文章正文

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

2018-01-03 1296

版权

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

简介： 使用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>