JSFiddle - React, Tailwind, and code Playground

by carlhong

HTML

<div class="main">
  <div class="head text">
    这是开头
  </div>
  <div class="middle text">
    这是中间这是中间这是中间这是中间这是中间
  </div>
  <div class="end text">
    这是结尾
  </div>
</div>
<div class="main">
  <div class="head text">
    这是开头aa
  </div>
  <div class="middle text">
    这是中间这是中间这是中间这是中间这是中间
  </div>
  <div class="end text">
    这是结尾aaaa
  </div>
</div>

CSS

.main {
  max-width: 300px;
  display: flex;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text {
  display: inline-block;
}

.head {
  background-color: blue;
}

.end {
  background-color: yellow;
}

.middle {
  background-color: red;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}