无需固定宽度实现CSS ellipsis文本省略，适配多分辨率场景

你只需要给flex容器添加3处CSS规则即可实现需求，无需编写媒体查询，自动适配全分辨率：

1. 给.header设置width: 100%，让头部占满页面横向可用空间
2. 给.left设置flex: 1和min-width: 0，让左侧容器自动占用除固定宽度元素外的所有剩余空间，同时允许内容溢出触发省略规则
3. 给.title设置flex: 1和min-width: 0，让标题容器自动占满左侧容器的剩余可用空间

修改后的完整CSS代码如下：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  overflow: hidden;
}

section {
  display: flex;
  align-items: flex-start;
}

.header {
  display: flex;
  background-color: #ccc;
  width: 100%; /* 新增规则 */
}

.left, .right {
  display: flex;
}

.left {
  flex: 1; /* 新增规则 */
  min-width: 0; /* 新增规则 */
}

.title {
  background-color: lightcoral;
  color: white;
  font-size: 40px;
  flex: 1; /* 新增规则 */
  min-width: 0; /* 新增规则 */
}

.title span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.c-1, .c-2, .c-3 {
  height: 65px;
}

.c-1 {
  background-color: tomato;
  width: 65px;
}

.c-2 {
  background-color: darkblue;
  width: 300px;
}

.c-3 {
  background-color: yellow;
  width: 840px;
}

实现原理 #

flex布局的子元素默认min-width值为auto，当子元素内容宽度超过父容器宽度时，会自动撑开父容器，导致text-overflow: ellipsis失效。手动设置min-width: 0后，允许容器收缩到小于内容宽度，溢出规则就会正常生效。配合flex: 1自动分配剩余空间的特性，即可实现不同分辨率下标题自动适配可用宽度，超长自动省略，不会破坏整体布局。

内容的提问来源于stack exchange，提问作者sosick