html - 列表连续行的不同行高

Question

我有一个列表，我希望带有长文本的订单项排到第二行，该行的行高比常规订单项之间的行高短。例如:

<ul style="list-style:none">
<li>
Hotel Chain
</li>
<li>
Taxi Service
</li>
<li>
Tourist Trap & Retail Plaza
</li>
<li>
Travel Company
</li>
<li>
Local Olive Oil Company
</li>
</ul>

希望这能让我清楚地知道我想要什么。感谢您的帮助!

{编辑}

我更改了上面的代码。

设计是响应式的，所以当屏幕缩小时，列表宽度也会缩小，一些占一行的行然后占两行。我希望那些有两条线的行高较短。

Answer 1

不清楚你想要达到什么效果，但是有一个伪元素 ::first-line 这可能就是你想要的

ul {
  width: 200px;
 }

li {
  margin-bottom:1rem;
  line-height: 1;
}

li::first-line {
  line-height: 2;
}

<ul>
  <li>lorem</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam soluta ex ipsam dignissimos, provident assumenda!</li>
  <li>lorem</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, magni!</li>
  <li>Lorem ipsum dolor sit.</li>
</ul>

::first-line @ MDN