CSS停止图像下的文本换行

我有以下标记：

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

我还尝试了

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.

不是这样的：

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.

---

如果希望

左边距

处理

span

元素，则还需要使其

显示：内联块

或

显示：块

由于这个问题获得了很多意见，这是公认的答案，我觉得有必要添加以下免责声明： 这个答案针对OP的问题（示例中设置了宽度）。当它工作时，它要求每个元素、图像和段落都有一个宽度。除非这是您的要求，否则我建议您使用此问题的另一个答案

span

元素是内联元素，不能在CSS中更改其宽度

您可以将以下CSS添加到跨度中，以便可以更改其宽度

display: block;

另一种通常更有意义的方法是使用

元素作为

的父元素

另外，除了图像上的

float:left

外，您还可以将

float:right

置于

li p

上，但在这种情况下，您还需要

text align:left

来正确对齐文本

另外，如果您继续使用第一个不添加

元素的解决方案，您的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;
    }

我不知道是谁干的，我不知道是谁干的

img{
浮动：左；
}
p{
溢出：隐藏；
}

---

请参见示例：

对于那些想要了解一些背景信息的人，这里有一个解释为什么

溢出：隐藏
有效。它与所谓的块格式上下文有关。这是W3C规范的一部分（即不是黑客行为），基本上是块类型流元素所占据的区域

每次应用时，
overflow:hidden
都会创建一个新的块格式上下文。但它不是唯一能够触发这种行为的属性。引用悉尼网络应用程序组的Fiona Chan：


浮动：左/右
溢出：隐藏/自动/滚动
显示：表格单元格和任何与表格相关的值/内联块
位置：绝对/固定

在图像和跨度周围环绕一个div，并将以下内容添加到CSS中，如下所示：

HTML

少

为文本设置
display:flex
。
你能把你的代码放到JSFIDLE中吗？我想你需要更清楚一点你的意图。如果不希望文本换行，则可以简单地使用
空白：nowrap在
里span{…}
，但我得到的印象是你正试图做些什么else@MyHeadHurts道歉-对我来说似乎很清楚：）我想在这行有两列。左边的20px用于图像。其余部分用于文本。如果文本换行，我希望它从左侧开始换行20px的第二行（在初始文本开始的下方）。对于过路人，您不需要按照公认的答案处理宽度。更简单的是：创建一个新的格式化上下文。见乔·康林的答案。关于更多的背景，请参阅我的。@hqcasanova有关记录，丹的回答在乔发布之前9个月被接受，在你发布之前16个月被接受。我不会不接受Dan的回答，不过谢谢你添加了备选方案。可能需要
vertical align:top也可以。这非常有用。我将
span
更改为
p
元素。然后就这两个似乎起了作用：
lip{marginleft:40px}.fav_star{float:left}
。图像的宽度由图像本身设置，
p
元素自动成为一个
块
，我只保留了宽度。谢谢。如果您要使用
display:block
，您最好使用
div
，因为这就是它的用途（或者按照您的建议使用
p
）。没有必要对文本进行双重包装-如果使用
p
，则可能会丢失
span
。依我看，您不应该使用HTML来更改页面的设计。这是CSS的工作（当然也有例外，特别是当您需要跨浏览器兼容性时）。我相信，使用适当的HTML和“良好的语义”更为重要。所以我不会使用
div
，在这种情况下，p
更有意义。丢失
span
对我来说有点微不足道，这取决于你如何布置你的内容。将
包装在
中是霍格沃茨的魔法！工作得很漂亮！这是这个问题的正确答案。此技术不需要为段落设置固定宽度。更简单、更容易的解决方案。即使在IE8中也可以完美地工作。事实上，如果包含文本的元素是
span
（OP的案例），那么这将不起作用。
span
需要
显示：块
。但是，除此之外，我同意这是一个更加优雅的解决方案。如果有人想知道溢出：隐藏背后的魔力是什么，请看下面我的答案。这不是我所期望的行为，但这太棒了。记录在案，这个答案比我勾选的答案晚了8个月：）哇。工作得很好。我真不敢相信我以前从来都不知道这一点。你能在你的答案中加入那篇文章的一些细节吗，以防链接失效？早上好，澳大利亚！感谢您的评论。这对于显示可能需要与附近的图像或浮动边栏抗衡的代码块是非常好的。最初描述的技术工作得很好，但正如其他人所说，这不是我所期望的行为。然而，我看不到浮点或内联块在没有溢出的情况下工作
<img src="url-to-image">
<p>Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

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

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

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