不定宽度父元素内部文本如何使用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;}
效果:
阅读全文
0 0
- 不定宽度父元素内部文本如何使用text-overflow属性
- css3溢出文本属性------text-overflow
- 如何通过js获得overflow属性为auto的元素的实际宽度
- 溢出文本text-overflow的使用问题
- 使用overflow/text-overflow时要注意父元素的float和width
- 文本的text-overflow
- text-overflow溢出文本
- text-overflow属性
- CSS3属性text-overflow
- CSS3属性text-overflow
- CSS3 text-overflow 属性
- CSS3 text-overflow属性
- css text-overflow属性
- 使用text-overflow:ellipsis对溢出文本显示省略号
- 使用 text-overflow: ellipsis 实现溢出文本省略号显示
- text-overflow 文本超出显示...
- css text-overflow 超过宽度显示省略号
- CSS3属性之:text-overflow
- 新唐NUC972 ARM9 内置DDR2 最大128MB 11路UART 电表 集中器 充电桩
- HDU 2045 不容易系列之(3)—— LELE的RPG难题(最简洁代码没有之一,数学大法好)
- java 自我知识总结 (十二)重载 及 重写
- 将eclipse开发的web项目导入到myeclipse
- 双11大战:为什么细分品类车载冰箱火了?
- 不定宽度父元素内部文本如何使用text-overflow属性
- Windows10环境下安装Nodejs、cnpm
- 201412-1 门禁系统 ccf
- c++ django上传图片
- 360算法工程师初面总结
- RabbitMQ入门教程(一):安装和常用命令
- installshield 指定多个自定义路径和文件
- android运行权限的一些理解
- Java练习题16 输入