开发随笔:flex:1被内部元素撑开问题解决办法

flex:1由于内部元素被撑开的问题

问题描述

当flex:1的元素当其子元素过长(文本过长)时，会直接撑开父元素

      <div class="wrapper">
        <div class="left">1div>
        <div class="middle">
          <div>
            3asdasdaadasdasdadadasdasd3asdasdaadasdasdadadasdasd3asdasdaadasdasdadadasdasd3asdasdaadasdasdadadasdasd3asdasdaadasdasdadadasdasd3asdasdaadasdasdadadasdasd3asdasdaadasdasdadadasdasd
          div>
        div>
        <div class="right">2div>
      div>

/*css文件*/
* {
     
  color: white;
}

.wrapper {
     
  display: flex;
}

.left {
     
  flex: 0 30%;
  background: red;
}

.middle {
     
  flex: 1;
  background: #f44;
}

.right {
     
  flex: 0 60px;
  background: blue;
}

• 内部元素内容较小时的布局

• 当内部元素宽度过大时候的问题

右边布局直接被顶出页面

解决办法

在flex:1的元素上添加overflow: hidden即可,

通过设置overflow:hidden即可将其宽度固定为100%宽度中其应该所占的宽度

对文本的操作

• 文本自动换行设置

.middle {
     
  flex: 1;
  background: #f44;
  overflow:hidden;
  word-wrap:break-word;
  word-break:break-all;
}

实验结果

• 文本不换行添加text-overflow设置

  *Notes:*这里的这里添加text-overflow的元素一定是宽度固定的，不然overflow:hidden会失效，比如div这里宽度block默认为100%,如果这里是span就不会生效

.middle {
     
  flex: 1;
  background: #f44;
  overflow:hidden;
}

.middle > div {
     
  overflow:hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

实验结果