php - 溢出 : hidden pushes text down

Question

当我将 overflow: hidden 添加到第一个跨度 (.welcome-show) 的类中时，出于某种原因，它会将其他类推低一点。我怎样才能解决这个问题 ？ 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;
}

Answer 1

这将帮助您对齐垂直向下的其他元素。更改我的答案中的高度。希望这会有所帮助:)

.the-other-element{
 height:100px;
 line-height:100px;
 ...
}