列表连续行的不同行高

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

Answer 2

你可以在本段中做到这一点。

<p>First line item</p>
<p>Second line item</p>
<p>This is the third line item that will<br>wrap on a new line but have a<br>smallerline-height than others</p>
<p>Fourth line item</p>
<p>This fifth line item is the same as<br>the third in that its line-height<br>is different because it has multiple lines</p>
<p>And the sixth line is the same with<br>a smaller line-height</p>

不需要css，或者如果您不想写 BR，您可以指定段落的宽度。

http://jsfiddle.net/8q6wgw2x/

列表连续行的不同行高

Different line height for continuing row of list

html

css

html-lists