這篇文章主要介紹了CSS如何實現(xiàn)三欄布局中間一欄自適應(yīng)且隨文字大小變化寬，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

百度面試碰到的題，要實現(xiàn)如下布局效果

其中中間這紫色的一欄的大小隨字體的多少而變寬/變窄，且多出的文字自動省略為[...],右邊的綠色欄要緊緊連著紫色這一欄。 主要對紫色這一欄的操作為：

1.flex: 0 1 auto (自適應(yīng))

2.text-overflow:ellipsis;(自動省略文字)

overflow:hidden;

white-space: nowrap;

完整的代碼如下

// CSS 部分
.container {
  display: flex;
}
.pic {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: pink;
}
.name {
  flex:0 1 auto;
  height: 100px;
  background-color: purple;
  text-overflow:ellipsis;
  overflow:hidden;
  white-space: nowrap;
}
.tag {
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  background-color: seagreen;
}

// HTML 部分