CSS เพื่อหยุดการตัดข้อความใต้รูปภาพ

ฉันมีมาร์กอัปต่อไปนี้:

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

ฉันต้องการให้ถ้าข้อความห่อหุ้มมันจะไม่เข้าไปใน 'คอลัมน์' ของรูปภาพ ฉันรู้ว่าฉันสามารถทำได้ด้วยtable(ซึ่งฉันกำลังทำอยู่) แต่มันใช้ไม่ได้ด้วยเหตุผลนี้

ฉันได้ลองทำสิ่งต่อไปนี้แล้ว แต่ไม่ประสบความสำเร็จ:

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

float: rightฉันยังพยายาม

ขอบคุณ.

แก้ไข: ฉันต้องการให้มีลักษณะดังนี้:

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

ไม่เหมือน:

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

เนื่องจากคำถามนี้มีผู้เข้าชมจำนวนมากและนี่เป็นคำตอบที่ได้รับการยอมรับฉันจึงจำเป็นต้องเพิ่มข้อจำกัดความรับผิดชอบต่อไปนี้:

คำตอบนี้เฉพาะสำหรับคำถามของ OP (ซึ่งมีการกำหนดความกว้างในตัวอย่าง) ในขณะที่ใช้งานได้คุณต้องมีความกว้างสำหรับแต่ละองค์ประกอบรูปภาพและย่อหน้า เว้นแต่เป็นความต้องการของคุณฉันขอแนะนำให้ใช้โซลูชันของ Joe Conlinซึ่งโพสต์ไว้เป็นคำตอบอื่นสำหรับคำถามนี้

spanองค์ประกอบเป็นองค์ประกอบแบบอินไลน์คุณจะไม่สามารถเปลี่ยนความกว้างใน CSS

คุณสามารถเพิ่ม CSS ต่อไปนี้ลงในช่วงของคุณเพื่อที่คุณจะสามารถเปลี่ยนความกว้างได้

display: block;

อีกวิธีหนึ่งซึ่งมักจะทำให้รู้สึกมากขึ้นคือการใช้องค์ประกอบเป็นผู้ปกครองสำหรับคุณ<p><span>

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

เนื่องจาก<p>เป็นblockองค์ประกอบคุณสามารถตั้งค่าความกว้างโดยใช้ CSS โดยไม่ต้องเปลี่ยนแปลงอะไร

แต่ในทั้งสองกรณีเนื่องจากคุณมีองค์ประกอบบล็อกในขณะนี้คุณจะต้องลอยรูปภาพเพื่อไม่ให้ข้อความทั้งหมดอยู่ใต้รูปภาพของคุณ

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

PS แทนที่จะfloat:leftในภาพคุณยังสามารถใส่float:rightในli pแต่ในกรณีที่คุณยังจะต้องมีtext-align:leftการปรับเปลี่ยนข้อความได้อย่างถูกต้อง

PSS หากคุณดำเนินการแก้ปัญหาแรกในการไม่เพิ่ม<p>องค์ประกอบ CSS ของคุณควรมีลักษณะดังนี้:

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

คำตอบง่ายๆสำหรับปัญหานี้ที่ดูเหมือนจะดึงดูดผู้คนจำนวนมาก:

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

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

ดูตัวอย่าง: http://jsfiddle.net/vandigroup/upKGe/132/

สำหรับผู้ที่ต้องการข้อมูลพื้นฐานนี่คือบทความสั้น ๆ ที่อธิบายว่าเหตุใดจึงoverflow: hiddenใช้ได้ มันจะทำอย่างไรกับสิ่งที่เรียกว่าบริบทการจัดรูปแบบบล็อก นี่เป็นส่วนหนึ่งของข้อมูลจำเพาะของ W3C (กล่าวคือไม่ใช่แฮ็ก) และโดยพื้นฐานแล้วเป็นภูมิภาคที่ถูกครอบครองโดยองค์ประกอบที่มีโฟลว์ประเภทบล็อก

ทุกครั้งที่ใช้overflow: hiddenจะสร้างบริบทการจัดรูปแบบบล็อกใหม่ แต่ไม่ใช่คุณสมบัติเดียวที่สามารถกระตุ้นพฤติกรรมนั้นได้ อ้างถึงงานนำเสนอโดย Fiona Chan จาก Sydney Web Apps Group:

• ลอย: ซ้าย / ขวา
• ล้น: ซ่อน / อัตโนมัติ / เลื่อน
• display: table-cell และค่าที่เกี่ยวข้องกับตาราง / inline-block
• ตำแหน่ง: แน่นอน / คงที่

หากคุณต้องการmargin-leftให้ทำงานกับspanองค์ประกอบคุณจะต้องสร้างมันขึ้นมาdisplay: inline-blockหรือdisplay:blockเช่นกัน

การตั้งค่าdisplay:flexสำหรับข้อความใช้ได้ผลสำหรับฉัน

ตัด div รอบรูปภาพและช่วงและเพิ่มสิ่งต่อไปนี้ใน CSS ดังนี้:

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%;
            }

น้อย

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

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