web-dev-qa-db-ja.com

divでのCSSワードラッピング

250pxの幅のdivがあります。インナーテキストがそれよりも広い場合、私はそれが崩壊することを望みます。 divはfloat：leftであり、オーバーフローが発生しました。ワードラッピングを使用してスクロールバーを消したい。どうすればこれを達成できますか？

<div id="Treeview">
<div id="HandboekBox">
    <div id="HandboekTitel">
        <asp:Label ID="lblManual" runat="server"></asp:Label>
    </div>
    <div id="HandboekClose">
        <asp:ImageButton ID="btnCloseManual" runat="server" 
            ImageUrl="Graphics/close.png" onclick="btnCloseManual_Click" 
            BorderWidth="0" ToolTip="Sluit handboek" />
    </div>
</div>
<asp:TreeView ID="tvManual" runat="server" RootNodeStyle-CssClass="RootNode">
    <Nodes>

    </Nodes>
</asp:TreeView>
</div>

CSS：

#Treeview
{
padding-right: 5px;
width: 250px;
height: 100%;
float: left;
border-right: solid 1px black;
overflow-x: scroll;
}
csshtmlword-wrap
97
Martijn

アンドリューが言ったように、あなたのテキストはまさにそれをしているべきです。

私が考えることができる1つのインスタンスがあり、それはあなたが提案する方法で動作し、それはあなたが空白プロパティを設定している場合です。

CSSのどこかに次のものがないかどうかを確認します。

white-space: nowrap

これにより、改行によって中断されるまで、テキストは同じ行に継続されます。

OK、申し訳ありませんが、後でマークアップを編集または追加したかどうかはわかりません（最初は表示されませんでした）。

Overflow-xプロパティは、スクロールバーが表示される原因です。これを削除すると、divはすべてのテキストを含めるのに必要な高さに調整されます。

104
Jayx

または単に使用する

Word-wrap: break-Word;

IE 5.5 +、Firefox 3.5+、およびChromeやSafariなどのWebKitブラウザーでサポートされています。

100
Jc Figueroa

try white-space:normal;これはwhite-space:nowrap;の継承をオーバーライドします

16
gordon

レンダリングされたhtmlがどのように見え、ツリービューdiv内の要素にどのスタイルが適用されているかを見ずに明確に言うのはかなり難しいですが、すぐに私に飛び出すのは

overflow-x: scroll;

それを削除するとどうなりますか？

7
Andrew

使用できます：

overflow-x: auto;

Overflow-xで「auto」を設定すると、スクロールは、DIVエリアの内側のサイズが最大の場合にのみ表示されます

3
Yamil Bendek

それだけではないことに少し驚いています。 div内に、幅が250より大きい値に設定された別の要素がありますか？

2
Andrew

Widthおよびfloat cssプロパティのみを設定すると、折り返しパネルが表示されます。次の例は正常に機能します。

<div style="float:left; width: 250px">
Pellentesque feugiat tempor elit. Ut mollis lacinia quam. 
Sed pharetra, augue aliquam   ornare vestibulum, metus massa
laoreet tellus, eget iaculis lacus ipsum et diam. 
</div>

たぶん、外観を変更する他のスタイルがありますか？

1
Aleris