CSS để dừng gói văn bản dưới hình ảnh

Tôi có đánh dấu sau:

<li id="CN2787">
  <img class="fav_star" src="images/fav.png">
  <span>Text, text and more text</span>
</li>

Tôi muốn nó để nếu văn bản kết thúc, nó không đi vào 'cột' cho hình ảnh. Tôi biết tôi có thể làm điều đó với table(mà tôi đang làm) nhưng điều này không khả thi vì lý do này .

Tôi đã thử những cách sau mà không thành công:

li span {width: 100px; margin-left: 20px}
.fav_star {width: 20px}

Tôi cũng đã thử float: right.

Cảm ơn.

CHỈNH SỬA: Tôi muốn nó trông như thế này:

IMG   Text starts here and keeps going... and
      wrap starts here.

Không phải như thế này:

IMG   Text starts here and keeps going... and 
wrap starts in the space left for the image.

Vì câu hỏi này đang nhận được nhiều lượt xem và đây là câu trả lời được chấp nhận, tôi cảm thấy cần phải thêm tuyên bố từ chối trách nhiệm sau:

Câu trả lời này dành riêng cho câu hỏi của OP (Có chiều rộng được đặt trong các ví dụ). Trong khi nó hoạt động, nó yêu cầu bạn phải có chiều rộng trên mỗi phần tử, hình ảnh và đoạn văn. Trừ khi đó là yêu cầu của bạn, tôi khuyên bạn nên sử dụng giải pháp của Joe Conlin được đăng như một câu trả lời khác cho câu hỏi này.

Phần spantử là một phần tử nội tuyến, bạn không thể thay đổi chiều rộng của nó trong CSS.

Bạn có thể thêm CSS sau vào span của mình để có thể thay đổi chiều rộng của nó.

display: block;

Một cách khác, thường có ý nghĩa hơn, là sử dụng một <p>phần tử làm cha mẹ cho của bạn <span>.

<li id="CN2787">
  <img class="fav_star" src="images/fav.png">
  <p>
     <span>Text, text and more text</span>
  </p>
</li>

Vì <p>là một blockphần tử, bạn có thể đặt chiều rộng của nó bằng cách sử dụng CSS mà không cần phải thay đổi bất cứ điều gì.

Nhưng trong cả hai trường hợp, vì bây giờ bạn có một phần tử khối, bạn sẽ cần phải làm nổi hình ảnh để văn bản của bạn không nằm bên dưới hình ảnh của bạn.

li p{width: 100px; margin-left: 20px}
.fav_star {width: 20px;float:left}

PS Thay vì float:leftvào hình ảnh, bạn cũng có thể đặt float:righttrên li pnhưng trong trường hợp đó, bạn cũng sẽ cần text-align:leftđể tổ chức lại các văn bản một cách chính xác.

PSS Nếu bạn tiếp tục với giải pháp đầu tiên là không thêm <p>phần tử, CSS của bạn sẽ trông giống như vậy:

li span{width: 100px; margin-left: 20px;display:block}
.fav_star {width: 20px;float:left}

Câu trả lời rất đơn giản cho vấn đề này mà dường như rất nhiều người mắc phải:

<img src="url-to-image">
<p>Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

    img {
        float: left;
    }
    p {
        overflow: hidden;
    }

Xem ví dụ: http://jsfiddle.net/vandigroup/upKGe/132/

Đối với những người muốn một số thông tin cơ bản, đây là một bài viết ngắn giải thích lý do tại sao overflow: hiddenhoạt động. Nó liên quan đến cái gọi là ngữ cảnh định dạng khối . Đây là một phần của thông số kỹ thuật của W3C (tức là không phải là một cuộc tấn công) và về cơ bản là khu vực được chiếm bởi một phần tử có luồng kiểu khối.

Mỗi khi nó được áp dụng, hãy overflow: hiddentạo một ngữ cảnh định dạng khối mới . Nhưng nó không phải là thuộc tính duy nhất có khả năng kích hoạt hành vi đó. Trích dẫn bài thuyết trình của Fiona Chan từ Nhóm ứng dụng web Sydney:

• float: left / right
• tràn: ẩn / tự động / cuộn
• display: table-cell và bất kỳ giá trị nào liên quan đến bảng / inline-block
• vị trí: tuyệt đối / cố định

Nếu bạn muốn margin-leftlàm việc trên một spanyếu tố bạn sẽ cần phải làm cho nó display: inline-blockhay display:blocklà tốt.

cài đặt display:flexcho văn bản phù hợp với tôi.

Quấn một div xung quanh hình ảnh và khoảng và thêm phần sau vào CSS như vậy:

HTML

        <li id="CN2787">
          <div><img class="fav_star" src="images/fav.png"></div>
          <div><span>Text, text and more text</span></div>
        </li>

CSS

            #CN2787 > div { 
                display: inline-block;
                vertical-align: top;
            }

            #CN2787 > div:first-of-type {
                width: 35%;
            }

            #CN2787 > div:last-of-type {
                width: 65%;
            }

ÍT HƠN

        #CN2787 {
            > div { 
                display: inline-block;
                vertical-align: top;
            }

            > div:first-of-type {
                width: 35%;
            }
            > div:last-of-type {
                width: 65%;
            }
        }