html - 在 HTML + CSS : Force text to max two rows, 增加宽度

Question

我有一个水平时间线，由列表 (li) 元素组成，其父属性为 display:flex;。这使列表水平。但我希望文本在框中最多为两行。

例如，我想要这个:

The first

asphalt is

delivered.

变成这样:

The first asphalt

is delivered.

我希望这是一条规则，宽度可以根据需要变得尽可能宽。

而且我已经看到很多示例，其中解决方案是使用 overflow:hidden。但这不是我要找的。我想知道是否有办法获得动态宽度，以便所有文本都可见。

编辑:

这是片段:

.left-arrow,.right-arrow {
  float:left;
  width: 0; 
  height: 0; 
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  margin-top:20px;
  cursor:pointer;
}
.left-arrow {
  border-right:20px solid black;
  padding-left: 5px;
}
.right-arrow {
  border-left:20px solid black;
  padding-right: 5px;
}
.timeline {
  list-style-type: none;
  display: flex;
  justify-content: left;
  margin: 0 5px;
  padding: 0;
  float: left;
  width: calc(100% - 60px);
  overflow-x: scroll;
  vertical-align: top;
}
.timeline li {
  width: 300px;
  vertical-align: top;
}
.timeline li a {
  color: #000;
}
.timestamp {
  margin-bottom: 10px;
  padding: 10px 10px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  white-space: nowrap;
  font-weight: 600;
}
.status {
  padding: 10px 5px 10px;
  display: flex;
  justify-content: center;
  border-top: 3px solid #000;
  position: relative;
  font-size: 1.1rem;
}
.status:before {
  content: "";
  width: 4px;
  height: 8px;
  background-color: black;
  position: absolute;
  top: -10px;
  left: calc(50% - (4px / 2));
}

<a href="#" class="left-arrow" data-role="none"></a>
<ul class="timeline" id="timeline">
  <li>
    <a href="#pop-1910-20">
      <div class="timestamp">1910-20</div>
      <div class="status">The founder buys land.</div>
    </a>
  </li>
  <li>
    <a href="#pop-1928">
      <div class="timestamp">1928</div>
      <div class="status">The refinery goes into operation.</div>
    </a>
  </li>
  <li>
    <a href="#pop-1929">
      <div class="timestamp">1929</div>
      <div class="status">The first asphalt is delivered.</div>
    </a>
  </li>
  <li>
    <a href="#pop-1931">
      <div class="timestamp">1931</div>
      <div class="status">New cracker.</div>
    </a>
  </li>
  <li>
    <a href="#pop-1939-45">
      <div class="timestamp">1939-45</div>
      <div class="status">Central role for the national sales</div>
    </a>
  </li>
  <li>
    <a href="#pop-1950s">
      <div class="timestamp">1950-talet</div>
      <div class="status">The network of petrol stations is being expanded</div>
    </a>
  </li>
  <li>
    <a href="#pop-1956">
      <div class="timestamp">1956</div>
      <div class="status">The second refinery is finished</div>
    </a>
  </li>
  <li>
    <a href="#pop-1958">
      <div class="timestamp">1958</div>
      <div class="status">The founder dies.</div>
    </a>
  </li>
  <li>
    <a href="#pop-1960">
      <div class="timestamp">1960</div>
      <div class="status">Risky sales strategy</div>
    </a>
  </li>
  <li>
    <a href="#pop-1967-69">
      <div class="timestamp">1967-69</div>
      <div class="status">Increased capacity of bitumen</div>
    </a>
  </li>
  <li>
    <a href="#pop-1974">
      <div class="timestamp">1974</div>
      <div class="status">The energy crisis leads to financial crisis</div>
    </a>
  </li>
</ul>
<a href="#" class="right-arrow" data-role="none"></a>

Answer 1

我们还可以通过将 height 和 line-height 减半来固定 li 元素的两条线。所以只能有两条线，但宽度可以最大。这样会有两条线，但它会在 x 侧扩展。它将类似于下面的链接。

.twolines{
  height: 50px;
  line-height: 25px;
  width: 100%;
  overflow-y: hidden;
}

<ul>
<li class="twolines">Hello World. If it has two lines but have max width it can to be produced so that it will not expanded. Some extra text will be truncated when even two lines exceeded</li>
<li class="twolines">Hello World. If it has two lines but have max width it can to be produced so that it will not expanded.</li>

</ul>