如何使用HTML / CSS将文字换行

106

我想设计一个文本块，如下图所示：

在此处输入图片说明

质疑这是否可能？

html css

— 用户名
source

1

带有缩进和对齐的图像周围文本的

— mavrosxristoforos

您是否要像在常规<p>标签中那样在图像周围包裹文本，但是您还提到<textarea>，这可能是一个完全不同的问题。如果有HTML，为什么不发布HTML？谢谢。

— Marc Audet 2013年

1

是的，您只需将php图像浮动到左侧，文本就会环绕它:-)

— Jack Tuck 2013年

所有这些评论，没有被接受的答案……

— Dave Kanter

110

您必须将float图像容器如下：

的HTML

<div id="container">
    <div id="floated">...some other random text</div>
    ...
    some random text
    ...
</div>

的CSS

#container{
    width: 400px;
    background: yellow;
}
#floated{
    float: left;
    width: 150px;
    background: red;
}

小提琴

http://jsfiddle.net/kYDgL/

— 本德尔
source

51

使用CSS Shapes，您不仅可以将文本浮动在矩形图像上，还可以更进一步。

实际上，您可以包装文本，使其采用要环绕的图像或多边形的边缘形状。

DEMO FIDDLE（当前正在使用Webkit- caniuse）

.oval {
  width: 400px;
  height: 250px;
  color: #111;
  border-radius: 50%;
  text-align: center;
  font-size: 90px;
  float: left;
  shape-outside: ellipse();
  padding: 10px;
  background-color: MediumPurple;
  background-clip: content-box;
}
span {
  padding-top: 70px;
  display: inline-block;
}

<div class="oval"><span>PHP</span>
</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
  survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
  software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley
  of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
  Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy
  text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised
  in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

展开摘要

另外，这是一篇关于CSS Shapes 的好文章列表

— 丹尼尔
source

1

有什么选择可以包装对象“ AROUND”，使对象位于中间？

— redestructa '16

@redestructa检查CSS排除项。请参阅我的文章：stackoverflow.com/a/19895616/703717目前仅在IE中受支持-caniuse.com/#feat=css-exclusions

— Danield '16

20

除了BeNdErR的答案：
“ other TEXT”元素应具有float:none，例如：

    <div style="width:100%;">
        <div style="float:left;width:30%; background:red;">...something something something  random text</div>
        <div style="float:none; background:yellow;"> text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text  </div>
    </div>

展开摘要

— 托杜亚
source

这是我可以使它工作的唯一方法。以及最干净的解决方案。

— andygoestohollywood 2014年

浮法：没有什么能救我！继续尝试浮动：使第二个元素正确无济于事。

— bkunzi01 '18

11

如果图像大小可变或设计具有响应性，则除了换行文字外，还可以为段落设置最小宽度，以免其变得太窄。
提供具有所需最小段落宽度的不可见CSS伪元素。如果没有足够的空间来容纳此伪元素，则将其向下推到图像下方，并带有该段落。

#container:before {
  content: ' ';
  display: table;
  width: 10em;    /* Min width required */
}
#floated{
    float: left;
    width: 150px;
    background: red;
}

— 吉汀B
source

我认为您的回答可能会帮我节省一些培根。我在响应式设计中堆叠左浮动图像时遇到问题。由于我的默认图像宽度为30％，并且两面都有图像，所以有时我的文本列只能宽4个字符。

— Sherwood Botsford