CSS word-wrapping in div

Question

Tôi có một div có chiều rộng 250px. Khi innertext rộng hơn tôi muốn nó phá vỡ. Div là phao: trái và bây giờ có một tràn. Tôi muốn thanh cuộn biến mất bằng cách sử dụng gói chữ. Làm thế nào tôi có thể đạt được điều này?

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

Answer 1

Như Andrew đã nói, văn bản của bạn nên làm việc đó.

Có một trường hợp mà tôi có thể nghĩ rằng sẽ hoạt động theo cách bạn đề xuất và đó là nếu bạn có thuộc tính khoảng trắng được đặt.

Xem nếu bạn không có điều sau đây trong CSS của bạn ở đâu đó:

white-space: nowrap 

Điều đó sẽ gây ra văn bản để tiếp tục trên cùng một dòng cho đến khi bị gián đoạn bởi một ngắt dòng.

OK, lời xin lỗi của tôi, không chắc chắn nếu chỉnh sửa hoặc thêm đánh dấu sau đó (không nhìn thấy nó lúc đầu).

Thuộc tính tràn-x là nội dung khiến thanh cuộn xuất hiện. Loại bỏ điều đó và div sẽ điều chỉnh đến cao như nó cần phải được chứa tất cả các văn bản của bạn.

Answer 2

Tôi là một chút ngạc nhiên khi nó không chỉ làm điều đó. Có thể có một yếu tố bên trong div có chiều rộng được đặt thành một cái gì đó lớn hơn 250?

Answer 3

Đặt chỉ các thuộc tính chiều rộng và nổi css sẽ nhận được bảng bao bì. Các folowing dụ chỉ làm việc tốt:

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

Có thể có phong cách khác ở nơi đó thay đổi sự xuất hiện?

Answer 4

Nó khá khó để nói dứt khoát mà không nhìn thấy những gì html rendered trông như thế nào và phong cách đang được áp dụng đối với các yếu tố bên trong div treeview, nhưng điều mà nhảy ra lúc tôi ngay lập tức là

overflow-x: scroll; 

Điều gì sẽ xảy ra nếu bạn xóa điều đó?

Answer 5

bạn có thể sử dụng:

overflow-x: auto; 

Nếu bạn đặt 'auto' trong overflow-x, cuộn sẽ chỉ xuất hiện khi bên trong kích thước là lớn nhất mà khu vực DIV

Answer 6

Hoặc đơn giản là sử dụng

word-wrap: break-word; 

được hỗ trợ trong các trình duyệt IE 5.5+, Firefox 3.5+ và WebKit như Chrome và Safari.

Answer 7

thử white-space:normal; Điều này sẽ ghi đè kế thừa white-space:nowrap;