2012-05-18 11 views
6

私は多少奇妙な作業をしているかもしれませんが、私はもっと良い解決策はないと信じています。私は<ul>をいくつかのコンテナに入れ、幅は変更可能で、インラインで<li>の要素を固定幅にする必要があります。私は同じ幅の<li>エレムの間にスペースを入れなければなりません。スペースの幅は動的に変化し、親コンテナの幅に依存する。再び、この<li>の項目は固定幅です。テキストの改行を制限するCSS方法

また、この記述された要素の上にいくつかのリンクを配置する必要があります。いくつかの理由から、リンクは他の<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の方法で通常のテキストをいくつかの行に分割しないでください?

+0

あなたは幅を設定しました:100px;あなたのCSSでは、行の幅が100pxを超える場合、テキストを複数の行に分割するので、幅を設定する必要はありません。または空白を使用することができます:nowrap;プロパティ。 – Shreedhar

+0

リスト項目は固定幅でなければなりません。私が言ったように私はブラウザを騙したい、それは彼が位置の要素の幅の固定幅になると考えさせてください。 –

答えて

8
.nobr { white-space:nowrap; } 
+0

私にとって完璧な作品です。どうもありがとう! –

関連する問題