关闭

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

标签: flex文本不换行flex文本不换行
440人阅读 评论(0) 收藏 举报
分类:
<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; */
}
0
0
查看评论

flex布局中,保持内容不超出容器的解决办法

在移动端,flex 布局很好用,它能够根据设备宽度来自动调整容器的宽度,用起来很方便,已经越来越离不开它,但是最近在做项目的时候发现一个问题。就是在一个设置了 flex:1 的容器中,如果文字很长,这时候文字就会超出容器,而不是呆在设置好的动态剩余的空间中。
  • zgh0711
  • zgh0711
  • 2017-10-18 11:00
  • 1095

文本不换行,显示省略号

.box{ width:246px; display: -webkit-box; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflo...
  • qq_35038331
  • qq_35038331
  • 2017-05-06 15:48
  • 182

table设置td文本超出为省略号无效的解决方法

doctype html> 2 html lang="en"> 3 head> 4 meta charset="UTF-8" /> 5 title>表格演示title> 6 style ty...
  • qq_35038331
  • qq_35038331
  • 2017-04-29 22:35
  • 1912

flexbox布局text文本单行显示多余省略号代替

index.wxml 微信小程序开发微信小程序开发微信小程序开发微信小程序开发微信小程序开发微信小程序开发 index.wxss .myview {   display: flex;   width: 100%; } .myvie...
  • jasonzds
  • jasonzds
  • 2017-02-01 14:12
  • 2470

文本不换行,超出显示省略号

需要对元素设置三个属性:overflow: hidden;text-overflow: ellipsis;white-space:nowrap; 如果不设置text-overflow: ellipsis属性则多出的部分隐藏,并且不会显示现实省略号 对于我这个脑子不好的就要多记录
  • qq_33802316
  • qq_33802316
  • 2017-08-23 13:31
  • 116

前端 flex弹性布局之弹性布局中文换行

主要提醒大家注意:在使用弹性布局的时候,如果div内部写的是 中文 ,会导致内部换行,请给换行的div加一个 white-space: nowrap; 属性。
  • qq_38334525
  • qq_38334525
  • 2017-11-04 15:45
  • 264

一个小的知识点——Flex中的文本换行

今天在显示图例的时候,觉得文本太长,想换行显示,有两种方法。
  • u010605113
  • u010605113
  • 2014-04-29 20:06
  • 1538

CSS 强制不换行,文字溢出显示省略号~

css一共就三句话: {  white-space: nowrap;    text-overflow:ellipsis;   overflow:hidden; } 注释: white-space: nowrap; 文本...
  • adley_app
  • adley_app
  • 2016-12-06 13:01
  • 4731

html div 不换行超出显示省略号

.div{font-size:18px; color:#000;line-height:24px;white-space:nowrap;text-overflow:ellipsis;word-break:break-all;overflow:hidden;}
  • a714115852
  • a714115852
  • 2014-06-09 21:08
  • 1933

Table里td中的文本过长,设置不换行,随内容同行显示

做Java的又要搞前端,有时候调样式有点烦躁,项目中前端页面都是自己写的,这里分享一个常见的样式调整,虽然很简单,但是没用过的情况下还真不知道怎么调        当td中内容过长时,内容会溢出,换行显示,美观超级差,在td里设置这个属性 "...
  • Thinkingcao
  • Thinkingcao
  • 2017-01-17 15:20
  • 3044
    个人资料
    • 访问:26746次
    • 积分:667
    • 等级:
    • 排名:千里之外
    • 原创:40篇
    • 转载:7篇
    • 译文:0篇
    • 评论:6条
    最新评论