sw2020 sw2020 - 1 month ago 7
CSS Question

Group Glyphicon and text together

I would like to group the Ticks and the Names together so that if a name goes onto a new line so does the tick and the full name

e.g.

enter image description here



<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>Nydia Dahm
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>Hillary Stano
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>Mikki Rudisill
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>Lashonda Hardcastle
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>Starr Ewalt
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>Geri Groen
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>Armandina Foreman
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>Alden Lusk





If I place the text into the span I seem to get extra spacing

https://jsfiddle.net/s7mtzt5f/

Answer

You need to wrap each group in a <span> and add the white-space:nowrap css style.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<span style="white-space:nowrap;"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span>Nydia Dahm</span>
<span style="white-space:nowrap;"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span>Hillary Stano</span>
<span style="white-space:nowrap;"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span>Mikki Rudisill</span>
<span style="white-space:nowrap;"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span>Lashonda Hardcastle</span>
<span style="white-space:nowrap;"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span>Starr Ewalt</span>
<span style="white-space:nowrap;"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span>Geri Groen</span>
<span style="white-space:nowrap;"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span>Armandina Foreman</span>
<span style="white-space:nowrap;"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span>Alden Lusk</span>