网站上的L形文本框

Question

我正试图在网站上创建以下文本框设计。我可以使用白色框的图像，但问题是我不知道如何创建一个L形文本区域，使文字自动换行并很好地适应这些白色框。

有人知道如何实现此目标吗？或者能否指导我去正确的方向进行调查？

- Crocodile

Answer 1

请尝试CSS Exclusions。

CSS排除定义了任意区域，围绕其周围的内联内容可以流动。CSS排除可以在任何CSS块级元素上定义。CSS排除扩展了以前仅限于浮动的内容包装的概念。

它们与单词换行特别相关。

- Nitesh

---

Robert Sedovšek 写了一篇带有有用视觉效果的优秀文章。但请记住这方面的浏览器支持。 - Clarice Bouwer

Answer 2

这就是你所需要的内容

<style type="text/css"> 
#grid {
    width: 30em;
    height: 30em;
    display: grid;
    grid-columns: 25% 25% 25% 25%;
    grid-rows: 25% 25% 25% 25%;

#top-right {
    grid-column: 3;
    grid-row: 2;
}

#bottom-left {
    grid-column: 2;
    grid-row: 3;
}

.lshapify {
    wrap-flow: both;
}

#content {
    grid-row: 1;
    grid-row-span: 4;
    grid-column: 1;
    grid-column-span: 4;
}
</style> 

- Ashish Sharma

---

谢谢您的回答，但据我所知，网格仅在IE10中受支持。 - Crocodile

Answer 3

我无法给你一个确切的解决方案，但你可以研究和利用 CSS 的 shape-outside 技术 来解决这个问题。不幸的是，目前对此的支持有限，因此取决于您希望针对的浏览器。有一个很好的工具可以检查 http://caniuse.com/

您可能会遇到一些覆盖内容的问题，因为您可能不知道需要处理多少文本。也许一些 JavaScript 可以解决这个问题。

下面的示例显示了如何使用 CSS 的 inset 添加一个块，但我认为您可以使用多边形并将另一个块定位在其上方。

* {
  box-sizing: border-box;
}
body {
  margin: 0 auto;
  max-width: 750px;
  font-size: 10px;
}
div {
  shape-outside: inset(50px 50px 50px 0px);
  width: 200px;
  height: 200px;
  float: left;
}

<p>Sample used from CodePen at http://codepen.io/team/css-tricks/pen/b2da5018d8f20ac3a2ccc26edb724db6</p>

<div></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis impedit libero esse odio excepturi fuga est ut itaque a quod suscipit, rerum asperiores. Consequuntur voluptates illo rerum recusandae pariatur asperiores, aspernatur, saepe ipsum error dolorem, quod inventore possimus modi deleniti tenetur et officiis.</p>
<p>Nemo ab in totam ratione sequi error, ea dolorum repudiandae omnis, eaque facere impedit fugiat. Dolorum distinctio autem sequi enim quidem esse accusamus repudiandae voluptatum nobis, velit, molestiae. Eaque maiores, harum. Saepe esse repellendus sint.</p>
<p>Labore provident optio quis commodi quod quaerat quo similique perspiciatis libero facere. Suscipit odit quas nemo, enim laudantium, provident repellendus natus nostrum facilis expedita adipisci qui, harum minus quidem officia cupiditate repellat ut praesentium. Possimus corporis, error atque ex adipisci, illum suscipit pariatur saepe impedit aliquam amet eos reiciendis quidem hic, nisi. Sint nobis modi, nesciunt quasi placeat quia.</p>
<p>Veniam inventore corrupti quisquam illum debitis vitae accusamus nobis alias cum iste error magnam, cupiditate earum! Incidunt at consequuntur, rem ipsa odio ipsum deleniti repudiandae blanditiis harum ut in, fugit officia rerum ad, corporis dolore!</p>
<p>Commodi repellendus esse quibusdam enim qui totam ipsum, consequuntur officia vel dolores, quod corrupti eveniet maiores minus explicabo, sapiente ratione doloribus laboriosam impedit nesciunt a obcaecati quam veritatis! Placeat, velit possimus delectus, atque voluptate iste alias illo, dolor odit ipsa facere quibusdam? Non omnis aliq.</p>

- Clarice Bouwer