văn bản chảy ra khỏi div

Question

Khi văn bản là không có khoảng và hơn kích thước div 200px nó chảy ra Chiều rộng được định nghĩa là 200px Tôi đã đặt mã của tôi ở đây http://jsfiddle.net/madhu131313/UJ6zG/ Bạn có thể xem hình ảnh dưới đây sửa: tôi muốn các văn bản để đi đến dòng kế tiếp

Answer 1

Đó là do thực tế rằng bạn có một từ dài mà không có khoảng trắng. Bạn có thể sử dụng thuộc tính bọc từ để làm văn bản bị ngắt:

#w74 { word-wrap: break-word; } 

Nó cũng có hỗ trợ trình duyệt khá tốt. See documentation about it here.

Answer 2

Bạn nên sử dụng overflow:hidden; hoặc scroll

http://jsfiddle.net/UJ6zG/1/

hoặc với php bạn có thể ngắn từ lâu ...

Answer 3

sử dụng overflow:auto nó sẽ cung cấp cho một cuộn cho văn bản của bạn trong div :).

Answer 4

Nếu đó chỉ là một ví dụ cần được bọc trong 2 hoặc 3 dòng, tôi sẽ chỉ sử dụng một số ít <wbr> trong chuỗi. Nó sẽ đối xử với những người giống như <br> nhưng nó sẽ không chèn ngắt dòng nếu nó không cần thiết.

<div id="w74" class="dpinfo"> 
adsfadsadsads<wbr>fadsadsadsfadsadsa<wbr>dsfadsadsadsfadsadsads<wbr>fadsadsadsfadsadsadsfa<wbr>dsadsadsfadsadsadsfadsad<wbr>sadsfadsadsads<wbr>fadsadsadsfadsads adsfadsads 
</div> 

Đây là một câu đố.

http://jsfiddle.net/gaby_de_wilde/UJ6zG/37/

Answer 5

Sử dụng

white-space: pre-line; 

Nó sẽ ngăn chặn văn bản từ chảy ra khỏi div. Nó sẽ phá vỡ văn bản khi nó đạt đến cuối của div.

Answer 6

Gần đây tôi đã gặp phải điều này. Tôi đã sử dụng: display:block;

Answer 7

Bạn cần phải áp dụng thuộc tính CSS sau vào khối container (div):

overflow-wrap: break-word; 

Theo thông số kỹ thuật (nguồn CSS | MDN):

Thuộc tính overflow-wrap CSS xác định xem trình duyệt có nên chèn ngắt dòng trong các từ để ngăn văn bản tràn ngập hộp nội dung của nó hay không.

Với giá trị thiết lập để break-world

Để ngăn chặn tràn, thông thường từ unbreakable có thể bị phá vỡ tại các điểm tùy ý nếu không có trường hợp điểm break chấp nhận được trong dòng.

Đáng nói ...

Khu nghỉ dưỡng ban đầu là một phần mở rộng của Microsoft không chuẩn và không tiền tố gọi là word-wrap, và được thực hiện bởi hầu hết các trình duyệt cùng tên. Từ đó nó đã được đổi tên thành overflow-wrap, với word-wrap là bí danh.

---

Nếu bạn quan tâm đến trình duyệt cũ hỗ trợ nó có giá trị xác định cả hai:

word-wrap : break-word; 
overflow-wrap: break-word; 

Ex. IE9 không nhận overflow-wrap nhưng hoạt động tốt với word-wrap