Tôi có thể ngăn văn bản trong khối div bị tràn không?

Question

Tôi có thể ngăn văn bản trong khối div bị tràn không?

Answer 1

Bạn có thể thử:

<div id="myDiv"> 
    stuff 
</div> 

#myDiv { 
    overflow:hidden; 
} 

Check-out the docs for the overflow property để biết thêm thông tin.

Answer 2

overflow: scroll? Hoặc tự động. trong thuộc tính kiểu.

Answer 3

Có. Bạn có thể sử dụng CSS - Có một loạt các giá trị mà bạn có thể sử dụng ..

http://www.w3schools.com/Css/pr_pos_overflow.asp

inkedmm là đúng, đó có thể là hành vi mà bạn muốn, nhưng bạn nên xác định xem đó là trường hợp.

Answer 4

.NonOverflow 
{ 
    width: 200px; /* Need the width for this to work */ 
    overflow: hidden; 
} 

<div class="NonOverflow"> 
    Long Text 
</div> 

Answer 5

Bạn có thể kiểm soát nó với CSS, có một vài lựa chọn:

• ẩn -> All tràn văn bản sẽ được ẩn.
• hiển thị -> Để văn bản bị tràn có thể nhìn thấy.
• cuộn -> đặt thanh cuộn nếu văn bản tràn qua

Hy vọng điều đó sẽ hữu ích.

Answer 6

Nếu div của bạn có chiều cao được đặt bằng css sẽ khiến nó bị tràn ra ngoài div.

Bạn có thể cung cấp cho div một chiều cao tối thiểu nếu bạn cần có chiều cao tối thiểu trên div vào mọi lúc.

Chiều cao tối thiểu sẽ không hoạt động trong IE6, nếu bạn có biểu định kiểu IE6 cụ thể, bạn có thể cung cấp chiều cao bình thường cho IE6. Chiều cao thay đổi trong IE6 theo nội dung bên trong.

Answer 7

Nếu bạn muốn các văn bản tràn trong div để tự động xuống dòng thay vì được ẩn hoặc thực hiện một thanh cuộn, sử dụng tài sản

word-wrap: break-word

.

Answer 8

có một tài sản css:

white-space : normal; 

Các trắng-không gian điều khiển bất động sản như thế nào văn bản được xử lý trên các yếu tố đó được áp dụng cho.

div { 

    /* This is the default, you don't need to 
    explicitly declare it unless overriding 
    another declaration */ 
    white-space: normal; 

} 

Answer 9

Bạn có thể sử dụng tràn văn bản thuộc tính CSS để cắt ngắn văn bản dài.

<div id="greetings"> 
    Hello universe! 
</div> 

#greetings 
{ 
    width: 100px; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; // This is where the magic happens 
} 

tham khảo: http://makandracards.com/makandra/5883-use-css-text-overflow-to-truncate-long-texts

Answer 10

Đơn giản chỉ cần sử dụng này:

white-space: pre-wrap;  /* CSS3 */ 
    white-space: -moz-pre-wrap; /* Firefox */  
    white-space: -pre-wrap;  /* Opera <7 */ 
    white-space: -o-pre-wrap; /* Opera 7 */  
    word-wrap: break-word;  /* IE */ 

Answer 11

Hãy thử thêm lớp này để khắc phục vấn đề:

.ellipsis { 
    text-overflow: ellipsis; 

    /* Required for text-overflow to do anything */ 
    white-space: nowrap; 
    overflow: hidden; 
} 

Giải thích thêm trong liên kết này http://css-tricks.com/almanac/properties/t/text-overflow/

Answer 12

Bạn chỉ có thể thiết lập min-width trong css, ví dụ:

.someClass{min-width: 980px;} 

Nó sẽ không phá vỡ, tuy nhiên bạn sẽ vẫn có cuộn-bar để giải quyết.

Answer 13

khuyến nghị cho làm thế nào để nắm bắt phần nào của CSS của bạn đang gây ra vấn đề:

1) thiết lập style="height:auto;" trên tất cả các yếu tố <div> và thử lại lần nữa.

2) Đặt style="border: 3px solid red;" trên tất cả các yếu tố <div> để xem khoảng cách của một khu vực mà hộp <div> đang chiếm dụng.

3) Lấy đi tất cả css height:#px; thuộc tính từ CSS của bạn và bắt đầu lại.

Vì vậy, ví dụ:

<div id="I" style="height:auto;border: 3px solid red;">I 
    <div id="A" style="height:auto;border: 3px solid purple;">A 
     <div id="1A" style="height:auto;border: 3px solid green;">1A 
     </div> 
     <div id="2A" style="height:auto;border: 3px solid green;">2A 
     </div> 
    </div> 
    <div id="B" style="height:auto;border: 3px solid purple;">B 
     <div id="1B" style="height:auto;border: 3px solid green;">1B 
     </div> 
     <div id="2B" style="height:auto;border: 3px solid green;">2B 
     </div> 
    </div> 
</div>