Different line height for continuing row of list - html

Question

I have a list and I want line items with long text to flow to the second row which would have a shorter line height than the line height between regular line items. For example:
<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>
So hopefully that makes it clear what I'm wanting. Thanks for helping!
{EDIT}
I changed the code above.
The design is responsive, so when the screen shrinks the list width shrinks and some lines that took up one line then takes up two lines. I want those with two lines to have a shorter line height.

Answer 1

It's not clear what effect you are trying to achieve but there is a pseudo-element of ::first-line which might be what you are after
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

You can do that natively this paragraphs.
<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>
No need to css, or you can specify a width to your paragraphs if you don't want do write the BRs.
http://jsfiddle.net/8q6wgw2x/