打破文本行以提高响应能力答案

【问题标题】：Break text lines for responsiveness打破文本行以提高响应能力
【发布时间】：2019-07-19 08:04:37
【问题描述】：

我有一张图片，旁边有一些文字，图片和文字都在wrapper 内居中，宽度为70%。

在不同的屏幕尺寸，尤其是小尺寸的屏幕上，文字位于图像下方。

我想将文本保留在图像旁边，当屏幕变小时，文本会分成更多行以适应宽度。

代码如下：

.wrapper{
    width: 70%;
    display: inline-block;
}

<div class="wrapper">
    <img class="pull-left" src="http://placehold.it/200">
    <div class="pull-left text-left">
        <h4>Lorem Lorem <br>
        Lorem Lorem
        </h4>
        <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, <br> sed do eiusmod
tempor incididunt ut labore et dolore <br> magna aliqua. Ut enim ad minim veniam, <br>
        </span>
        <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, <br> sed do eiusmod
tempor incididunt ut labore et dolore <br> magna aliqua. Ut enim ad minim veniam, <br>
        </span>
    </div> <!-- .pull-left -->
    <div class="clearfix"></div>
</div> <!-- .wrapper -->

这是一个查看和测试代码的小提琴： https://jsfiddle.net/u8ajq2oh/

【问题讨论】：

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

这是一个不使用引导程序的小提琴。

小提琴：https://jsfiddle.net/rmufb8L9/

.wrapper{
  margin-left: 15%;
	width: 70%;
	display: inline-flex;
  flex-direction:row;
  
}

img{height:min-content}

 <div class="wrapper">
	<img  src="http://placehold.it/200">
	<div class="text-left">
	  <h4>Lorem Lorem <br>
	Lorem Lorem</h4>
	  <span>
	  Lorem ipsum dolor sit amet, consectetur adipisicing elit, <br> sed do eiusmod
tempor incididunt ut labore et dolore <br> magna aliqua. Ut enim ad minim veniam, <br>
	  </span>
	  <span>
	  Lorem ipsum dolor sit amet, consectetur adipisicing elit, <br> sed do eiusmod
tempor incididunt ut labore et dolore <br> magna aliqua. Ut enim ad minim veniam, <br>
	  </span>
	</div>
</div>

【讨论】：