不定宽度父元素内部文本如何使用text-overflow属性

来源:互联网 发布:模拟网络攻击软件 编辑:程序博客网 时间:2024/06/13 11:27

使用text-overflow的时候通常都会添加max-width属性,用来定义元素的最大宽度,但这个值通常为固定宽度、如果父元素宽度不定该如何设置样式?

html:
为文本内容添加父元素p.p-wrapper

<div class="row">    <div class="col-xs-5">        <div class="input-group">            <span class="input-group-addon" id="basic-addon1">@</span>            <div class="form-control text-container">                <p class="p-wrapper">                    <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus, voluptate.</span>                    <span>Lorem ipsum dolor sit amet.</span>                    <span>Lorem ipsum dolor sit.</span>                </p>            </div>        </div>    </div></div>

css:
使用绝对定位设置宽度为100%

.p-wrapper{   display: inline-block;    overflow: hidden;    vertical-align: middle;    width: 100%;    position: absolute;    left: 0;    white-space: nowrap;    text-overflow: ellipsis;}

效果:
这里写图片描述

原创粉丝点击