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

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

Nếu bạn muốn văn bản tràn trong div tự động tạo dòng mới thay vì bị ẩn hoặc tạo thanh cuộn, hãy sử dụng

word-wrap: break-word

bất động sản.

Bạn co thể thử:

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

#myDiv {
    overflow:hidden;
}

Kiểm tra các tài liệu cho thuộc tính tràn để biết thêm thông tin.

Bạn có thể sử dụng tràn văn bản thuộc tính CSS để cắt bớt 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

Bạn có thể điều khiển nó bằng CSS, có một vài tùy chọn:

• ẩn -> Tất cả văn bản tràn sẽ bị ẩn.
• hiển thị -> Để văn bản tràn ra hiển thị.
• cuộn -> đặt thanh cuộn nếu văn bản tràn

Hy vọng nó giúp.

Đơ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 */

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

white-space : normal;

Thuộc tính khoảng trắng kiểm soát cách xử lý văn bản trên phần tử được áp dụng.

div {

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

}

Hãy thử thêm lớp này để khắc phục sự cố:

.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/properIES/t/text-overflow/

overflow: scroll? Hoặc tự động. trong thuộc tính phong cách.

Tôi đoán bạn nên bắt đầu với những điều cơ bản từ w3

https://www.w3schools.com/cssref/css3_prigin-overflow.asp

div {
    white-space: nowrap; 
    overflow: hidden;
    text-overflow: ellipsis;
}

Nếu div của bạn có chiều cao được đặt trong css sẽ khiến nó 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 phải có chiều cao tối thiểu trên div 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 cụ thể IE6, bạn có thể cung cấp cho nó chiều cao thông thường cho IE6. Thay đổi chiều cao trong IE6 theo nội dung bên trong.

Bạn chỉ có thể đặt chiều rộng tối thiểu trong css, ví dụ:

.someClass{min-width: 980px;}

Nó sẽ không bị hỏng, tuy nhiên bạn vẫn sẽ có thanh cuộn để xử lý.

Các đề xuất về cách nắm bắt phần nào trong CSS của bạn đang gây ra sự cố:

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

2) Đặt style="border: 3px solid red;"trên tất cả các <div>yếu tố để xem diện tích của <div>hộp của bạn chiếm bao nhiêu.

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

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>

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

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

!! Mã hóa cứng trước mắt !! Tùy thuộc vào mã xung quanh và độ phân giải màn hình, điều này có thể dẫn đến hành vi khác nhau / không mong muốn

Nếu lỗi tràn ra ngoài câu hỏi và cần phải có dấu gạch nối chính xác, bạn có thể sử dụng thực thể HTML gạch nối mềm nơi bạn muốn từ / văn bản bị ngắt. Bằng cách này, bạn có thể xác định trước một điểm phá vỡ bằng tay.

­

Dấu gạch nối sẽ chỉ xuất hiện khi từ cần ngắt để không tràn vào vùng chứa xung quanh.

Thí dụ:

<div class="container">
  foo&shy;bar
</div>

Kết quả nếu vùng chứa đủ rộng và văn bản sẽ không tràn vào vùng chứa:

foobar

Kết quả nếu vùng chứa nhỏ và văn bản sẽ thực sự tràn vào vùng chứa:

foo-
bar

.container{
  background-color: green;
  max-width: 30px;
}

Example 1 - container to small => text overflows container:

<div class="container">
  foobar
</div>

Example 2 - using soft hyphen => text breaks at predetermined break point:

<div class="container">
  foo&shy;bar
</div>

Example 3 - using soft hyphen => text still overflowing because the text before the soft hyphen is to long:

<div class="container">
  foobar&shy;foo
</div>

Thông tin khác: https://en.wikipedia.org/wiki/Soft_hyphen