11

text-overflow: ellipsisBootstrap 3 navbarのテキストで使用したい.navbar-brandので、iPhone のようなデバイスでは、navbar が垂直サイズで大きくなるのではなく、テキストが切り捨てられます。

私も2つのボタンを持っています：

<nav class="navbar navbar-default navbar-fixed-top">
  <button type="button" class="btn btn-default navbar-btn navbar-left">Back</button>
  <a class="navbar-brand" href="#" >Branding text that can sometimes be too wide</a>
  <button type="button" class="btn btn-default navbar-btn navbar-right">Logout</button>
</nav>

の幅をハードコードする場合はtext-overflow: ellipsis(withwhite-space: nowrapおよびset も) 動作しますが、最大の利用可能なスペースが自動的に使用されるように、これを達成する方法を探しています。overflow: hidden.navbar-brand

PS

.navbar-brand幅がハードコードされている場合に追加すると機能する CSS :

.ellipsis {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
4

2 に答える 2

1

"navbar-brand" width: 100% を設定すると、省略記号プロパティは引き続き機能し、利用可能な最大スペースが得られます。

于 2013-10-24T15:18:08.640 に答える