Example code for implementing a three-column layout with CSS, where the middle column is adaptive and changes width with text size

The questions encountered in Baidu interviews need to achieve the following layout effects

The size of the purple column in the middle will widen/narrow with the amount of fonts, and the extra text will be automatically omitted as [...]. The green column on the right should be closely connected to the purple column. The main operations for the purple column are:

1.flex: 0 1 auto (adaptive)

2.text-overflow:ellipsis; (automatically omit text)

overflow:hidden;

white-space: nowrap;

The complete code is as follows

// CSS part.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 part <div class="container">
    <div class="pic"></div>
    <div class="name">
        zhasansndfdkfnald
    </div>
    <div class="tag">Designer</div>
</div>

Summarize

This concludes this article about how to use CSS to implement a three-column layout with the middle column adaptive and changing width with text size. For more relevant CSS three-column layout content, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!