Pembungkusan kata CSS di div

Saya memiliki div dengan lebar 250px. Ketika inertext lebih lebar dari itu saya ingin itu rusak. Div adalah float: left dan sekarang memiliki luapan. Saya ingin bilah gulir menghilang dengan menggunakan pembungkusan kata. Bagaimana saya bisa mencapai ini?

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

Seperti yang dikatakan Andrew, teks Anda seharusnya melakukan hal itu.

Ada satu contoh yang dapat saya pikirkan yang akan berperilaku seperti yang Anda sarankan, dan itu adalah jika Anda memiliki set properti spasi.

Lihat jika Anda tidak memiliki yang berikut di CSS Anda di suatu tempat:

white-space: nowrap

Itu akan menyebabkan teks berlanjut di baris yang sama sampai terganggu oleh jeda baris.

Oke, maaf, tidak yakin apakah diedit atau ditambahkan mark-up setelahnya (awalnya tidak melihatnya).

Properti overflow-x inilah yang menyebabkan bilah gulir muncul. Hapus itu dan div akan menyesuaikan setinggi yang dibutuhkan untuk memuat semua teks Anda.

Atau cukup gunakan

word-wrap: break-word;

didukung di browser IE 5.5+, Firefox 3.5+, dan WebKit seperti Chrome dan Safari.

coba white-space:normal;Ini akan menimpa pewarisanwhite-space:nowrap;

Cukup sulit untuk mengatakan secara definitif tanpa melihat seperti apa tampilan html yang diberikan dan gaya apa yang diterapkan ke elemen dalam div treeview, tetapi hal yang langsung menarik perhatian saya adalah

overflow-x: scroll;

Apa yang terjadi jika Anda menghapusnya?

kamu bisa memakai:

overflow-x: auto; 

Jika Anda mengatur 'auto' di overflow-x, scroll hanya akan muncul ketika ukuran bagian dalam adalah yang terbesar dari area DIV

Saya sedikit terkejut tidak begitu saja. Mungkinkah ada elemen lain di dalam div yang memiliki lebar diatur ke sesuatu yang lebih besar dari 250?

Mengatur hanya lebar dan properti css float akan mendapatkan panel pembungkus. Contoh berikut berfungsi dengan baik:

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

Mungkin ada gaya lain yang mengubah tampilan?

Saya menemukan itu word-wrap: anywhereberhasil (sebagai lawan yang word-wrap: break-worddisebutkan dalam jawaban lain).

Lihat juga:

Apa arti "di mana saja" dalam properti css "bungkus kata"?