Wrapping text around non-rectangular shapes css/html

问题

I read on a website that there is a way of wrapping text around non-rectangular shapes but somehow I don't know how to do it,

Now I found this link from a question posted here about 3 years ago, things have changed thenso if there is an easier way to do it, that would be great.

Here is the visual example to give more of an idea and the url of the website explaining how to do it, but as I said this is about 3 years old.

http://www.torylawson.com/mw_index.php?title=CSS_-_Wrapping_text_around_non-rectangular_shapes

回答1:

Today, there is not much option if you want this effect cross-browser and especially for older ones, you need to manually set floatting elements that will keep text away from chosen areas.

in futur, we will have this : http://www.w3.org/TR/2013/WD-css-shapes-1-20131203/

demo: http://codepen.io/anon/pen/fmlgp

div {display:table;border:1px solid;
background:url(http://www.printable-math-worksheets.com/images/Polyhedron.gif) center 100px no-repeat;
background-size:150px 150px;
width:600px;margin:auto;}
div p {display:table-cell;padding:0.25em;}
p:first-child {border-right:1px solid;}
p::before {
  content:'';
  float:right;
  border-left:solid rgba(0,0,0,0.2);/* demo purpose */
  padding-top:125px;
}
.cssShape {
  float:right;
  clear:right;
  background:rgba(0,0,0,0.2);/* demo purpose */
  width:15px;
  height:1.2em;
  margin:0;
}
.right .cssShape {
  float:left;
  clear:both;
}
.left .cssShape + .cssShape{
  width:25px;
}
.left .cssShape + .cssShape + .cssShape,
.right .cssShape + .cssShape + .cssShape + .cssShape  {
  width:45px;
}
.left .cssShape + .cssShape + .cssShape + .cssShape,
.left .cssShape + .cssShape + .cssShape + .cssShape + .cssShape  + .cssShape + .cssShape{
  width:60px;
}
.left .cssShape + .cssShape + .cssShape + .cssShape + .cssShape{
  width:70px;
}

.left .cssShape + .cssShape + .cssShape + .cssShape + .cssShape  + .cssShape {
  width:60px;
}
.right .cssShape + .cssShape + .cssShape   {
  width:25px;
}
.right .cssShape + .cssShape + .cssShape + .cssShape +  .cssShape{
  width:20px;
}
.right .cssShape + .cssShape + .cssShape {
  width:60px;
}
.right .cssShape + .cssShape   {
  width:70px;
}
.right .cssShape  {
  width:60px;
}

HTML for test

<div>
  <p class="left">
    <span class="cssShape"></span>
    <span class="cssShape"></span>
    <span class="cssShape"></span>
    <span class="cssShape"></span>
    <span class="cssShape"></span>
    <span class="cssShape"></span>

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
  <p class="right">    <span class="cssShape"></span>
    <span class="cssShape"></span>
    <span class="cssShape"></span>
    <span class="cssShape"></span>
    <span class="cssShape"></span>
  Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>

回答2:

CSS Shapes' shape-outside property is now widely supported in Chrome, Safari and Opera.

There's no support in IE or Firefox as of June 2015, but this shouldn't prevent you from using progressive enhancement and serve a simple rectangular shape for those browsers.

This article is a good starting point for learning to use CSS Shapes for layout: http://www.chenhuijing.com/blog/why-you-should-be-excited-about-css-shapes/

I don't recommend the stacked floated elements technique. Even though it yields the desired effect, it also generates code difficult to maintain and reason about.

Keep it simple, accessible, and provide extra features where native browser capabilities permit it. There's no need for things to look exactly the same in every browser.

来源：https://stackoverflow.com/questions/21079382/wrapping-text-around-non-rectangular-shapes-css-html

标签

html

css

image

word-wrap