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

98

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

nhập mô tả hình ảnh ở đây

css border

— madhu131313
nguồn

171

Đó là do bạn có một từ dài không có dấu cách. Bạn có thể sử dụng thuộc word-wraptính để làm cho văn bản bị ngắt:

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

Nó cũng hỗ trợ trình duyệt khá tốt. Xem tài liệu về nó ở đây .

— chipcullen
nguồn

3

nó không hoạt động cho tôi đây là một ví dụ khác.

— Deepak Vaishnav

tthis là tuyệt vời, giải quyết một số vấn đề trong trang đáp ứng

— yussan

Thật là một giải pháp sạch sẽ và dễ dàng. Cảm ơn vì đã chia sẻ nó.

— Dzenis H.

108

Sử dụng

white-space: pre-line;

Nó sẽ ngăn văn bản chảy ra khỏi div. Nó sẽ ngắt đoạn văn bản khi nó đi đến cuối div.

— Nixon
nguồn

28

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

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

hoặc với php bạn có thể rút ngắn các từ dài ...

Awesome.sorry đề cập đến tôi muốn nó đi đến dòng tiếp theo như gmail chat hoặc facebook trò chuyện :)

— madhu131313

Sau đó, bạn có thể sử dụng phiên bản của @chipcullen với word-wrap! demo: jsfiddle.net/UJ6zG/3

8

Bạn cần áp dụng thuộc tính CSS sau cho khối vùng chứa (div):

overflow-wrap: break-word;

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

Các overflow-wrapquy định cụ thể thuộc tính CSS hay không duyệt nên chèn ngắt dòng trong lời nói để ngăn chặn văn bản từ tràn hộp nội dung của nó.

Với giá trị được đặt thành break-word

Để tránh tràn, các từ không thể ngắt thông thường có thể bị ngắt ở các điểm tùy ý nếu không có điểm ngắt nào được chấp nhận trong dòng.

Đáng nói...

Thuộc tính này ban đầu là một tiện ích mở rộng không chuẩn và chưa được cố định của Microsoft được gọi word-wrap, và được hầu hết các trình duyệt có cùng tên triển khai. Nó đã được đổi tên thành overflow-wrap, với word-wrapmột bí danh.

Nếu bạn quan tâm đến hỗ trợ của các trình duyệt cũ, bạn nên chỉ định cả hai:

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

Ví dụ. IE9 không nhận dạng được overflow-wrapnhưng hoạt động tốt vớiword-wrap

— Paolo
nguồn

Cảm ơn, nó đã làm việc cho tôi. Bạn đã viết "Với giá trị được thiết lập để phá vỡ thế giới" - tôi khá chắc rằng bạn muốn nói đến "ngắt từ" mà không có "l", tôi hy vọng bạn không có ý phá vỡ thế giới;)

— Jake Neumann

7

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

— Rahul Razdan
nguồn

4

Nếu điều này có ích. Thêm thuộc tính sau với giá trị vào bộ chọn của bạn:

white-space: pre-wrap;

— Martin Lloyd Jose
nguồn

2

Điều này đã làm cho tôi mẹo:

{word-break: break-all; }

— Addo
nguồn

1

cảm ơn bạn rất nhiều, đây là thứ duy nhất hiệu quả với tôi (sử dụng các thành phần được tạo kiểu trong React)

— mlz7

0

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

— arn-arn
nguồn

-6

Nếu nó chỉ là một trường hợp cần được bao bọc trên 2 hoặc 3 dòng, tôi sẽ chỉ sử dụng một vài <wbr>trong chuỗi. Nó sẽ xử lý những thứ giống như vậy <br>nhưng nó sẽ không chèn ngắt dòng nếu 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 trò đùa.

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

— gaby de wilde
nguồn