CSS Span Not Wrapping Hoàn toàn

Tôi đang gặp một số vấn đề với việc gói nội dung vào một dòng mới khi nó đạt đến chiều rộng tối đa. Tôi đã thiết lập blog của tôi hiển thị tất cả các thẻ trong một div duy nhất và khi dòng đầu tiên đạt đến độ rộng tối đa, thẻ tiếp theo sẽ chuyển sang dòng tiếp theo. (Kèm theo là những gì đang xảy ra trong Chrome và Firefox)CSS Span Not Wrapping Hoàn toàn

http://jsfiddle.net/QHWNF/7/

Đây là Bộ luật CSS:

p.tagHolder{ 
margin-bottom:5px; 
line-height:25px;}

Tất cả HTML/PHP là,

<a href="#"><span>TagName</span></a><a href="#"><span>TagName2</span></a>....

Chrome Firefox

Nguồn

2012-08-28 Zach Case

Có lẽ bạn có thể tạo ra một fiddle tối thiểu (jsfiddle.net) cho thấy vấn đề. Ở đó bạn thậm chí có thể bao gồm hình ảnh của bạn. –

http://jsfiddle.net/QHWNF/7/ –

Thử đặt các nhịp của bạn thành display: inline-block.

http://jsfiddle.net/QHWNF/10/

Nguồn

2012-08-28 20:23:51 Nate

Nate cảm ơn bạn! Làm việc như người ở. –

Vui vì nó đã giúp! – Nate

@Krewe - tuyệt vời này làm việc, đó là những gì tôi đã suy nghĩ - mà nói, tôi sẽ quấn '' xung quanh '' hơn là cách khác xung quanh, cho 'Test' - nói rằng, theo quan điểm của tôi: Đây là Thing là một Tag, và Tag này liên kết đến (cái gì đó). –

Thêm word-wrap: normal; và word-break: normal; vào vùng chứa span và p của bạn. Điều này sẽ đảm bảo rằng các từ chỉ bị phá vỡ ở các điểm ngắt được cho phép khi có nhu cầu bọc.

Tôi hy vọng điều đó sẽ hữu ích!

Nguồn

2012-08-28 20:16:12 Chris

Đối với Chrome và Firefox sử dụng word-break: break-từ và cho IE sử dụng -ms-word-break: giữ-tất cả

Nguồn

2016-03-17 11:30:03

Trả lời

Các vấn đề liên quan