divでのCSSワードラップ

幅が250pxのdivがあります。innertextがそれよりも広い場合は、分解したい。divはfloat：左で、オーバーフローが発生しています。ワードラッピングを使用してスクロールバーを消してほしい。どうすればこれを達成できますか？

<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;
}

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

私が考えることができるインスタンスが1つあります。それは、あなたが提案する方法で動作します。それは、空白スペースプロパティセットがある場合です。

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

white-space: nowrap

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

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

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

または単に使用する

word-wrap: break-word;

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

してみてくださいwhite-space:normal;。これは、継承優先されますwhite-space:nowrap;

レンダリングされたhtmlがどのように表示され、treeview div内の要素にどのスタイルが適用されているかを確認せずに明確に言うのはかなり難しいですが、すぐに私に飛びつくのは

overflow-x: scroll;

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

あなたは使うことができます：

overflow-x: auto; 

オーバーフローxで「自動」を設定すると、内側のサイズがDIV領域よりも大きい場合にのみスクロールが表示されます

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

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>

おそらく、外観を変更する他のスタイルがありますか？

私はそれがword-wrap: anywhereうまくいったことを見つけましたword-wrap: break-word別の答えで言及されたの）。

以下も参照してください。

「word-wrap」cssプロパティの「anywhere」はどういう意味ですか？