overflow:hidden将文本向下推

时间:2015-06-14 12:05:20

标签: php html css

当我将overflow: hidden添加到第一个范围(.welcome-show)的类时,由于某种原因,它会将其他范围向下推。我怎样才能解决这个问题 ? screenshot 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;
}

2 个答案:

答案 0 :(得分:1)

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

{{1}}

答案 1 :(得分:0)

我自己也遇到过这个问题,所以这里是我发现的简单解决方案,以防其他人遇到这个问题。

$drivers = explode("\r\n", $value );

$value = '';
foreach ($drivers as $dr){
    $elements = ((strpos($dr, "/") === false) ? array(0 => $dr) : (explode("/", $dr)));
    $index = 0;
    foreach ($elements as $element) {
        $value .= (($index++ === 0) ? '' : '/') . '<a href="/driver.php?q='. $element . '~Driver">'. $element . '</a>';
    }
    $value .= '<br>';
}