2013-04-30 11 views
8

Có giải pháp nào cho ngắt dòng khi độ phân giải màn hình nhỏ thay vì <br> không?ngắt dòng cho truy vấn phương tiện?

br ngắt dòng tất cả thời gian :(

Ở đây mã của tôi <h2>I create unique, clean sites that are easy to navigate.<br>All my works comply with web</h2>

Tôi nghĩ CSS3 có thể có giải pháp về vấn đề này

là có bất kỳ giải pháp cho <br> này vì ngắt dòng chỉ cần thiết khi trang trên thiết bị di động

cảm ơn trước sự giúp đỡ của bạn

+3

Tôi yêu 'Tất cả tác phẩm của tôi phù hợp với web' :-) –

+2

quấn câu thứ hai vào một phần tử span, sau đó gán ' display: block' đến phần tử ở độ rộng đã cho. Nhưng tôi muốn có một giải pháp sạch hơn hoặc sử dụng
fcalderan

Trả lời

15

Bạn chỉ cần thêm một lớp vào thẻ BR và đặt nó thành hiển thị: không theo mặc định.

Sau đó, trong truy vấn phương tiện truyền thông di động của bạn đặt nó là "display: tĩnh"

Tôi đã đề nghị tĩnh chứ không phải khối bởi vì tôi không nghĩ rằng một thẻ BR là màn hình khối theo mặc định như vậy có lẽ tốt nhất để đơn giản đi với tĩnh.

+1

http://jsbin.com/iyamum/2/edit Ok, nó hoạt động và với "phương pháp tiếp cận đầu tiên trên thiết bị di động", không cần phải đảo ngược màn hình - chỉ nhớ đặt dấu cách giữa dấu chấm và '
' – fcalderan

+1

'display' không có giá trị thuộc tính được gọi là' tĩnh', vì vậy tốt hơn nên sử dụng 'block'. Để tham khảo http://www.w3schools.com/jsref/prop_style_display.asp. Nhưng tôi vẫn đang tự hỏi thuộc tính hiển thị mặc định cho '
' – Syed

+1

@Syed - Một vài phần trên vị trí tĩnh: http://alistapart.com/article/css-positioning-101 https://css-tricks.com/ what-if-there-was-no-position-static/https://developer.mozilla.org/en/docs/Web/CSS/position –

2

Bạn chỉ có thể sử dụng phao nổi, theo cách đó bạn không bao giờ cần phải suy nghĩ về điểm chụp ảnh cần phải ở đâu. Nó hoặc hiển thị cả hai bên cạnh nhau, hoặc ngay lập tức snaps vào dòng tiếp theo nếu họ không phù hợp.

span { 
    display: block; 
    float: left; 
    margin-right: 0.4em; 
} 

jsFiddle: http://jsfiddle.net/e4mWK/

+0

Đây là một giải pháp thông minh tuyệt vời ! – dkamins

+0

Để bổ sung cho câu trả lời của Christian, bạn cũng có thể sử dụng không gian trắng CSS: nowrap; tài sản để quấn các đoạn văn bản mà bạn không muốn ngắt dòng. I.e một khẩu hiệu, một tên thích hợp, vv .. – Yann

5

Nếu sử dụng Bootstrap:

<br class="visible-xs"> 
+2

có, đó là một trong những câu trả lời tốt nhất nếu bootstrap được gắn thẻ trong câu hỏi – Muhammed