flex布局文本不换行不显示省略号的解决方法

原创 2017年11月14日 19:47:22
<div class="container">
    <div class="title">我是标题</div>
    <div class="content">
        <p>巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉</p>
    </div>
</div>
.container{
    display:flex;
}
.title{
    width:100px;
    height:100px;
}
.content{
    flex:1;
}
.content>p{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

此时当你的p标签中文字特别多的时候会特别长,并不会超出显示省略号,解决办法:
1. 给p的父元素加overflow:hidden
2. 给p的父元素加上width:0px;

.content{
    flex:1;
    overflow:hidden;
    /* width:0; */
}
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

DIV+CSS实操七:中文系内容模块控制文本不换行和超出指定宽度后用省略号代替

在做经管系主网页的同时也在进行着中文系主网页的构建,果然是只有自己去实践了,才能遇到各种各样的问 题,然后再去寻找解决这些问题的方法,最后进行修改和不断的调试,最后达到自己想要的效果。中文系主网页构...

Android中TextView中内容不换行的解决方法

问题 如果新建的Android项目采用的Android 3.0以上的SDK,同时采用了 作为整个项目的主题 ...

关于在html中数字和英文不换行的解决方法

字符换行 table,td,th,div { border:1px green solid;} code { font-family:"Courier New", Cou...

css 长单词不换行溢出容器的解决方法 word-wrap与word-break

这两个东西是什么,我相信至今还有很多人搞不清,只会死记硬背的写一个word-wrap:break-word;word-break:break-all;这样的东西来强制断句,又或者是因为这两个东西实在是...

css控制不溢出,不换行,溢出部分省略号显示

white-space: nowrap;text-overflow:ellipsis; overflow:hidden;   text-overflow : clip | ellipsis 取值: ...
  • kyleing
  • kyleing
  • 2013年08月23日 11:03
  • 8281

css控制不溢出,不换行,溢出部分省略号显示

white-space: nowrap;text-overflow:ellipsis; overflow:hidden; text-overflow : clip | ellipsis 取值: cl...

CSS自动换行、强制不换行、强制断行、超出显示省略号

P标签是默认是自动换行的,因此设置好宽度之后,能够较好的实现效果,但是最近的项目中发现,使用ajax加载数据之后,p标签内的内容没有换行,导致布局错乱,于是尝试着使用换行样式,虽然解决了问题,但是并没...

设置div中文字超出时自动换行和css实现文本超出N行之后显示省略号等

一、对于div强制换行 1.(IE浏览器)white-space:normal; word-break:break-all;这里前者是遵循标准。 #wrap{white-space:normal; w...

easyui在jsp页面的td文本过长时无法自动换行的解决方法

在用easyui写后台程序的时候发现了td无法自动换行的问题,当一个td单元格里的文本过长的时候,单元格会一直拉伸,这样用户体验度会变得很差而且不美观。刚开始的代码和界面效果如下: 尝试着上网找...
  • Xanthin
  • Xanthin
  • 2015年12月18日 10:16
  • 2108

CSS3弹性布局文字超出省略号代替不起作用解决方法

内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:flex布局文本不换行不显示省略号的解决方法
举报原因:
原因补充:

(最多只允许输入30个字)