Issue arises when resizing the browser window, causing the first text to break. The objective is to display the entire sentence without breaking words, regardless of window size. Attempts have been made with queries, but the correct solution remains elusive. Refer to the image for a clearer understanding of the problem.
<div class="row">
<div class="col-sm-7">
<ul class="list-inline">
<h2>
<li class="list-inline-item">LYD</li>
<li class="list-inline-item">◦</li>
<li class="list-inline-item">LYS</li>
<li class="list-inline-item">◦</li>
<li class="list-inline-item">LED</li>
<li class="list-inline-item">◦</li>
<li class="list-inline-item">AV</li>
</h2>
</ul>
</div>
<br>
<div class="col-sm-5">
<div class="middle">
<h2>
<span class="glyphicon glyphicon-earphone"></span> 57 67 18 14
</h2>
</div>
</div>
</div>
CSS:
ul li { display: inline; }
ul.list-inline{
text-align: center;
padding-right: 15px;
}
.middle{
margin-bottom: 60px;
padding-right: 15px;
}