Văn bản không được gói trong thẻ p

Question

Tôi có hai div được thả nổi, cạnh nhau, với các thẻ p bên trong. Các văn bản trong các thẻ p không quấn và chỉ tràn container, như bạn có thể thấy trong các văn bản dưới hình ảnh:

HTML của tôi trông giống như vậy:

 <div class="submenu"> 
      <h3>Destinations in Europe</h3> 
      <ul> 
       <li><a href="#">dfgdgdgfgdg</a></li> 
       <li><a href="#">dfgdgdgfgdg</a></li> 
       <li><a href="#">dfgdgdgfgdg</a></li> 
       <li><a href="#">dfgdgdgfgdg</a></li> 
      </ul> 
      <h3>Features</h3> 
      <div> 
       <img src="/assets/images/o/menu/city-feat-one.jpg" /> 
       <h4>blahblah</h4> 
       <p> 
        khkhjhjkhkyhkighkjfkhkiyhohhjkhjlhkluoiulohlhjhiououhljhiououhljhiououhljhiououhljhiououhljhiououhl 
       </p> 
      </div> 
      <div> 
       <img src="/assets/images/o/menu/city-feat-two.jpg" /> 
       <h4>blahblah</h4> 
       <p> 
        khkhjhjkhkyhkighkjfkhkiyhohhjkhjlhkluoiulohlhjhiououhl 
       </p> 
      </div>   
     </div> 

CSS của tôi :

#rb-menu-com li .submenu > div { 
    width:48%; 
    float:left; 
    position: relative; 
} 

#rb-menu-com li .submenu div p { 
    color:#fff; 
    margin: 0; 
    padding:0; 
    width:100%; 
    position: relative; 
} 

#rb-menu-com li .submenu div img { 
    border:1px solid #fff; 
} 

Có ai đã từng trải nghiệm điều này trước đây không? Tôi chưa từng !! Làm tôi phát điên!

Answer 1

Lời gói chỉ xảy ra khi có một break từ.

Nếu bạn có "từ", miễn là đó, thì không có chỗ nào để vỡ.

Giải pháp thích hợp là viết nội dung thực và không phải là chuỗi ký tự vô nghĩa. Nếu bạn đang sử dụng nội dung do người dùng tạo, hãy thêm dấu kiểm cho các từ dài đặc biệt và không cho phép chúng (hoặc cắt một phần của chúng cho URL trong khi vẫn giữ toàn bộ nội dung trong liên kết).

Hoặc, bạn có thể sử dụng word-break CSS property để yêu cầu trình duyệt ngắt dòng ở giữa các từ.

p { word-break: break-all } 

(Lưu ý browser support).

Hoặc, bạn có thể sử dụng overflow để cắt bớt văn bản nếu văn bản không vừa trong vùng chứa.

Answer 2

thêm dấu phẩy: thuộc tính bên trái vào hình ảnh.

#rb-menu-com li .submenu div img { 
    border:1px solid #fff; 
    float:left; 
} 

Answer 3

Cung cấp kiểu này cho thẻ <p>.

p { 
    word-break: break-all; 
    white-space: normal; 
} 

Answer 4

Đó là vì bạn có văn bản liên tục, có nghĩa là một từ dài không có khoảng trống. Để phá vỡ nó thêm word-break: break-all;

.submenu div p { 
    color:#fff; 
    margin: 0; 
    padding:0; 
    width:100%; 
    position: relative; word-break: break-all; background:red 
} 

DEMO

Answer 5

Đây không phải là câu trả lời cho câu hỏi nhưng khi tôi tìm thấy trang này trong khi tìm kiếm câu trả lời cho một vấn đề mà tôi có, tôi muốn đề cập đến giải pháp mà tôi tìm thấy vì tôi mất nhiều thời gian. Với hy vọng điều này sẽ hữu ích cho những người khác:

Vấn đề là văn bản đó trong một thẻ <p> sẽ không gấp trong div. Cuối cùng, tôi mở thanh tra và nhận thấy một 'thực thể không phá vỡ' giữa tất cả các từ. Trình soạn thảo của tôi, vi, chỉ hiển thị các khoảng trống bình thường (một số không rõ ràng, tôi không biết điều gì) nhưng tôi đã sao chép đã dán văn bản từ một tài liệu PDF. Giải pháp là sao chép một khoảng trống từ bên trong vi và thay thế nó bằng một khoảng trống. I E. :% s///g nơi trống được thay thế được sao chép từ văn bản vi phạm. Đã giải quyết được sự cố.

Answer 6

Bạn có thể sử dụng từ bọc để ngắt các từ hoặc chuỗi ký tự liên tục nếu nó không vừa với một dòng trong vùng chứa.

word-wrap: break-word; 

điều này sẽ tiếp tục ngắt dòng tại các điểm ngắt thích hợp trừ khi một chuỗi ký tự không khớp trên một dòng, trong trường hợp đó nó sẽ bị hỏng.

JSFiddle

Answer 7

Để ai vẫn còn đang gặp khó khăn, hãy chắc chắn để kiểm tra và xem nếu bạn đã thiết lập một giá trị line-height trên phông chữ trong câu hỏi: nó có thể được trọng các quấn từ.

Answer 8

EASY

p{ 
    word-wrap: break-word; 
}