8

私は少し奇妙な仕事をしているかもしれませんが、これ以上の解決策はないと信じています。幅が変更可能で、固定幅の<ul>インライン要素を持つコンテナが必要です。同じ幅の要素の<li>間にスペースを入れる必要があります(そしてすでに解決策が見つかりました) 。<li>スペースの幅は動的に変化し、親コンテナーの幅に依存します。繰り返しますが、この<li>アイテムの幅は固定されています。

また、この記述された要素の上にいくつかのリンクを配置する必要があります。何らかの理由で、リンクは他の<ul>要素にある必要があります。また、インライン要素でラップされて<li>います。そして、説明されたアイテムのすぐ上に配置したいと思います<li><li>これは、上記のようにアイテムの固定幅を設定することで実行できます。さて、問題は、すべてのリンクのテキストが実際には幅が異なり、2 行に分割されることですが、1 行に配置する必要があります。

だから私はブラウザをだますしたい: テキストはオーバーフロー<li>項目になります.

.liElem {
  width: 100px;
  height: 20px;
  overflow: visible;
}

しかし、ご想像のとおり、テキストは 2 行に分割されており、実際にはリスト項目の右側ではなく下部にあふれています。

私が望んでいた効果は&nbsp;、次のようにテキストにスペースを挿入することで実現できます<li><a href="#">Add&nbsp;to&nbsp;Favourites</a></li>

それで、私の質問はこれです:css-wayで通常のテキストを複数の行に分割しないようにするにはどうすればよいですか?

4

1 に答える 1

12
.nobr  { white-space:nowrap; }
于 2012-05-18T06:19:46.273 に答える