When I add overflow: hidden
to the class of the first span (.welcome-show
), for some reason it pushes the other ones down a bit. How can I fix this ?
PHTML:
<div class="col-lg-6 pull-left">
<p>
<span class="welcome-show">Здравей, <?php echo $this->EscapeHtml($user->nick) ?></span>
<span class="rank">Ранк:
<?php
switch ($user->role) {
case 1:
?>
<span class="rank-vip">VIP</span>
<?php
break;
case 2:
?>
<span class="rank-vipplus">VIP+</span>
<?php
break;
default:
?>
<span class="rank-none">Никакъв</span>
<?php
break;
}
?>
</span>
<span class="credits-show">Кредити:
<?php echo $this->EscapeHtml($user->credits) ?>
</span>
<a href="/charge-credits" class="credits-charge-link">
<img src="/img/ui-icon-credits" class="ui-icon-credits"/>Заредете кредити
</a>
<a href="/edit" class="register">
<span class="icon icon-settings ui-icon ui-icon-gear"></span>Настройки
</a>
<a href="/logout" class="register">
<span class="icon icon-logout ui-icon ui-icon-close"></span>Излез
</a>
</p>
</div>
<?php
} else {
?>
<div class="col-lg-6 pull-left">
<p>
<a href="/login" class="login">
<span class="icon icon-login ui-icon ui-icon-key"></span>Влез
</a>
<a href="/register" class="register">
<span class="icon icon-register ui-icon ui-icon-person"></span>Регистрирай се
</a>
</p>
</div>
<?php
}
?>
CSS:
.welcome-show {
display: inline-block;
max-width: 200px !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}