Gói từ CSS trong div


100

Tôi có một div với chiều rộng 250px. Khi nội dung rộng hơn tôi muốn nó bị chia nhỏ. Div là float: left và bây giờ bị tràn. Tôi muốn thanh cuộn biến mất bằng cách sử dụng gói từ. 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;
}

Câu trả lời:


110

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

Có một trường hợp mà tôi có thể nghĩ về nó 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ó phần sau trong CSS của mình ở đâu đó:

white-space: nowrap

Điều đó sẽ khiến văn bản tiếp tục trên cùng một dòng cho đến khi bị ngắt dòng bởi ngắt dòng.

Được rồi, tôi xin lỗi, không biết sau này có chỉnh sửa hay thêm phần đánh dấu hay không (lúc đầu không thấy).

Thuộc tính tràn-x là nguyên nhân khiến thanh cuộn xuất hiện. Loại bỏ điều đó và div sẽ điều chỉnh đến mức cần thiết để chứa tất cả văn bản của bạn.


Bạn đúng. TreeView là xây dựng bởi Microsoft và khi tôi kiểm tra nguồn gốc, ở khắp mọi nơi white-space: nowrap được sử dụng
Martijn

À! Giỏi. PhoneGap + jquery mobile dẫn đến nhiều kiểu để sắp xếp. Bằng cách thêm "khoảng trắng: bình thường; tràn: tự động;" điều đó đã sắp xếp tôi ra.
Michael Blankenship

2
thử white-space:normal;trên phần tử của bạn để ghi đè thừa kế white-space: nowraptừ cha mẹ của nó
gordon

102

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.


19

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


8

Khá khó để nói dứt khoát nếu không nhìn thấy html được hiển thị trông như thế nào và những phong cách nào đang được áp dụng cho các phần tử trong div treeview, nhưng điều khiến tôi bật ra ngay lập tức là

overflow-x: scroll;

Điều gì xảy ra nếu bạn loại bỏ nó?


Sau đó, văn bản đi qua ranh giới
Martijn 02/02/09

3

bạn có thể dùng:

overflow-x: auto; 

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


2

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


1

Chỉ đặt thuộc tính width và float css sẽ nhận được một bảng điều khiển bao bọc. Ví dụ sau hoạt động 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ó những phong cách khác thay đổi diện mạo?


Nó không hoạt động. Trong div của tôi, tôi sử dụng siêu liên kết. Có thể là có cái gì đó để làm với nó?
Martijn

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.