csshtml-listsline-height

Singe List Item Line Height Differs When Wrapping Multiple lines


so I'm having a weird CSS line height issue with list items that may wrap on to a third item for a single point. The line height has a set value but it appears when it wraps on to a third line within the same point the line height is different.

So far I have set the line height value and height to auto. This isn't making any difference. I'm wondering if i need to set another attribute for this that I'm unaware of but not finding any useful resources online.

<ul class="iconlist">
<li>Aerodynamics force coefficients and centre of balance</li>
<li>Contour of Mach number, pressure coefficient, yPlus, wall shear stress, Q-criterion, etc</li>
<li>Frequency response analysis</li>
</ul>

ul.iconlist li {
line-height: 1.42857143; /** not my choice to have this value **/
height:auto;
}

Solution

  • Solved this myself, very strange issue I think may be being caused by a third party tool. Oddly I couldnt see any issues with the css but the introduction of a span tag to resolve the additional lines did the trick