CSS การตัดคำใน div

ฉันมี div ที่มีความกว้าง 250px เมื่ออินเนอร์เท็กซ์กว้างกว่าที่ฉันต้องการให้มันพังทลาย div คือ float: ทางซ้ายและตอนนี้มี overflow ฉันต้องการให้แถบเลื่อนหายไปโดยใช้การตัดคำ ฉันจะบรรลุเป้าหมายนี้ได้อย่างไร?

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

ดังที่แอนดรูว์กล่าวว่าข้อความของคุณควรทำอย่างนั้น

มีตัวอย่างหนึ่งที่ฉันคิดได้ว่ามันจะทำงานในลักษณะที่คุณแนะนำและนั่นคือถ้าคุณมีการตั้งค่าคุณสมบัติช่องว่าง

ดูว่าคุณไม่มีสิ่งต่อไปนี้ใน CSS ของคุณหรือไม่:

white-space: nowrap

ซึ่งจะทำให้ข้อความดำเนินต่อไปในบรรทัดเดียวกันจนกว่าจะถูกขัดจังหวะด้วยการแบ่งบรรทัด

โอเคขออภัยไม่แน่ใจว่าแก้ไขหรือเพิ่มมาร์กอัปในภายหลัง (ไม่เห็นในตอนแรก)

คุณสมบัติ overflow-x คือสิ่งที่ทำให้แถบเลื่อนปรากฏขึ้น ลบสิ่งนั้นออกและ div จะปรับให้สูงที่สุดเท่าที่จำเป็นเพื่อให้มีข้อความทั้งหมดของคุณ

หรือเพียงแค่ใช้

word-wrap: break-word;

รองรับในเบราว์เซอร์ IE 5.5+, Firefox 3.5+ และ WebKit เช่น Chrome และ Safari

ลองwhite-space:normal;สิ่งนี้จะลบล้างการสืบทอดwhite-space:nowrap;

ค่อนข้างยากที่จะพูดให้ชัดเจนโดยไม่ต้องดูว่า html ที่แสดงผลมีลักษณะอย่างไรและรูปแบบใดบ้างที่นำไปใช้กับองค์ประกอบภายใน treeview div แต่สิ่งที่กระโดดเข้ามาหาฉันทันทีคือ

overflow-x: scroll;

จะเกิดอะไรขึ้นถ้าคุณลบออก

คุณสามารถใช้ได้:

overflow-x: auto; 

หากคุณตั้งค่า "อัตโนมัติ" ใน overflow-x การเลื่อนจะปรากฏเฉพาะเมื่อขนาดด้านในใหญ่ที่สุดในพื้นที่ DIV

ฉันแปลกใจเล็กน้อยที่ไม่ได้ทำอย่างนั้น มีองค์ประกอบอื่นใน div ที่มีความกว้างตั้งค่ามากกว่า 250 ได้หรือไม่

การตั้งค่าเพียงความกว้างและคุณสมบัติลอย 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กล่าวไว้ในคำตอบอื่น)

ดูสิ่งนี้ด้วย:

"ที่ใดก็ได้" หมายความว่าอย่างไรในคุณสมบัติ css "word-wrap"