103

幅が 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;
}
4

8 に答える 8

111

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

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

CSS のどこかに次のものが含まれていないかどうかを確認してください。

white-space: nowrap

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

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

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

于 2009-02-02T08:24:25.443 に答える
102

または単に使用する

word-wrap: break-word;

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

于 2011-12-06T19:16:22.070 に答える
8

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

overflow-x: scroll;

それを取り除くとどうなりますか？

于 2009-02-02T08:27:11.990 に答える
3

使用できます：

overflow-x: auto;

オーバーフロー-xで「auto」を設定すると、内部サイズがそのDIV領域で最大の場合にのみスクロールが表示されます

于 2009-03-04T19:51:35.770 に答える
2

それだけではないことに少し驚いています。div 内に幅が 250 を超える別の要素が存在する可能性はありますか?

于 2009-02-02T08:14:38.913 に答える
1

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>

外観を変更する他のスタイルが配置されている可能性がありますか?

于 2009-02-02T08:17:27.440 に答える