Tôi làm cách nào để ngăn chặn trẻ mồ côi văn bản HTML?

Question

tôi thường có một hình ảnh mà tôi quấn văn bản xung quanh, và đôi khi các văn bản kết thúc tốt đẹp ngượng nghịu, như vậy:

Trong HTML, hình ảnh được lưu hành sang bên trái và văn bản đơn giản sau:

<p><img style="float:left;" src="/images/[image]" /></p> 
<p>This is my David Copperfield, <em>I was born</em> kind of bio.  For a more concise one, please see the <a href="/jenny/press-kit#bio">press kit</a>.</p> 
... 

Điều này chủ yếu hoạt động, ngoại trừ khi độ dài văn bản chỉ chạy qua phần cuối của hình ảnh và quay trở lại lề trái và khi văn bản không đủ dài để điền nhiều hơn một dòng (trong trường hợp này, nó chỉ là một từ). Khi điều đó xảy ra, nó trông rất tệ.

Vì vậy, có cách nào để kiểm soát luồng văn bản để điều này không xảy ra không?

Answer 1

gì bạn có thể làm là thêm overflow: hidden đến p thẻ, nơi có văn bản. Điều này sẽ làm cho nó như vậy bất kỳ văn bản kết thúc tốt đẹp sau khi hình ảnh sẽ phù hợp với phần lớn hơn. Bây giờ khi bạn có đoạn văn lớn, điều này có thể trông buồn cười, tuy nhiên nếu đoạn văn của bạn là tất cả khá ngắn này sẽ giúp đỡ.

Ví dụ: http://jsfiddle.net/8ZsKy/2/

luân phiên bạn chỉ có thể thêm một quy tắc lớp và áp dụng nó vào tiềm năng "vấn đề" đoạn văn.

p.wrap-inline { 
    overflow:hidden; 
} 

EDIT: cập nhật jsfiddle (oops)

Answer 2

<img style="float:left; clear="both" src="/images/[image]" /> 

Answer 3

Câu hỏi này thực sự đã cho tôi suy nghĩ mặc dù nó thực sự gây phiền nhiễu đôi khi, Trong quá khứ tôi đã cố định các vấn đề tương tự như sau bằng cách điều chỉnh chiều cao dòng một chút,

line-height:20px; 

hoặc điều chỉnh kích thước thực tế của hình ảnh lớn hơn một chút hoặc nhỏ hơn,

<img style="float:left;" src="/images/[image]" width="100" height="200" /> 

hoặc thay đổi theo dõi của văn bản

letter-spacing: 0.1em; 

hoặc sử dụng dấu gạch nối (tôi không thích nó hay khuyên nó)

hyphens: auto; 

Tuy nhiên theo như hiểu biết của tôi đi tôi không biết về bất kỳ quy tắc css để loại bỏ mồ côi văn bản. Có thể có kịch bản nhưng tôi chưa bao giờ nghe nói về nó và có một chút nghiên cứu về nó một lúc trở lại. Hy vọng nó đã giúp :)

Answer 4

Đây là cách hoạt động nổi. Nếu bạn không muốn điều đó, đừng sử dụng float; bạn có thể ví dụ thay vào đó hãy sử dụng định vị để văn bản xuất hiện dưới dạng một khối ở bên phải của hình ảnh.

Rất tiếc, không có cách nào để sử dụng thả nổi và yêu cầu, ví dụ: rằng dòng cuối cùng không nên ngắn. Bạn có thể ngăn từ cuối cùng xuất hiện trên một dòng của chính nó bằng cách sử dụng một khoảng trống giữa nó và từ trước, ví dụ: it will. Và bạn có thể mở rộng điều này thành một nhóm từ ngắn. Nhưng điều này chỉ có nghĩa là nhóm xuất hiện trên một dòng của riêng nó và dòng trước tương ứng ngắn hơn (và do đó có thể trông kỳ lạ).

Nếu văn bản chỉ dài quá một chút, bạn có thể sửa đổi hiển thị của nó để mất ít không gian theo chiều dọc hơn, ví dụ: bằng cách loại bỏ các dòng trống giữa các đoạn, mặc dù điều này sẽ là một sự thay đổi bố trí chủ yếu (mặc dù có lẽ là một trong những tốt):

p { margin: 0 } 
p + p { text-indent: 1.3em; }