css 文字在上方换行 - 而不是在图片下方

Question

我有要应用的文本和图像 "text-wrap"。在我的例子中，文本只是环绕在图像下方，但我试图实现完全相反的效果。一个fiddle说的千言万语..

html

  <p>
    <span class="myimage">Image</span>
    Lorem Ipusm sum dolor set Lorem Ipusm sum dolor set Lorem Ipusm sum dolor setLorem Ipusm sum dolor set Lorem Ipusm sum
    dolor setLorem Ipusm sum dolor setLorem Ipusm sum dolor setLorem Ipusm sum dolor set    etLorem Ipusm sum dolor setLorem Ipusm sum dolor setLorem Ipusm sum dolor set  etLorem Ipusm sum dolor setLorem Ipusm s
    um dolor setLorem Ipusm sum dolor set
</p>

css

   .myimage {
   width: 140px;
    height: 120px;
    position: relative;
    float: right;
    top: 15px;
    margin: 11px;
    border: 1px solid red;
}

*我希望文字仅环绕在图片上方，而不是下方 *

谢谢

Answer 1

height: calc(100% - 120px); 会在这里帮助你:)

body {
  font-family: sans-serif;
  font-size: 13px;
}
.container {
  max-width: 400px;
  height: 200px;
}
img {
  height: 100px;
  width: 150px;
  background-color: white;
  border: 5px solid red;
  box-sizing: border-box;
  float: right;
  clear: right;
}
.spacer {
  height: calc(100% - 120px);
  width: 0px;
  float: right;
}

<div class="container">
<div class="spacer"></div>
<img/>
<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.</p>
</div>

Answer 2

一个简单的答案。

.myimage {
    float: right;
    clear: right;
    
    /* Visual settings */
    width: 140px;
    height: 130px;
    margin: 20px;
    border: 2px solid red;
}

.container::before {
    content: "";
    height: 5em;
    width: 0px;
    float: right;
}

/* Visual settings */
p {
    text-align: justify; 
}

<p class="container">
<span class="myimage">Image</span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in ullamcorper urna. Maecenas et libero sed libero consequat varius vitae nec erat. Sed volutpat venenatis lacus non commodo. Sed rutrum libero eu malesuada ultricies. Donec feugiat tincidunt turpis vel hendrerit. Curabitur id nisi ex. Nullam nec justo in velit lobortis commodo id non odio. Morbi augue lacus, semper ac ornare id, placerat eu ante. Etiam euismod nisl et turpis auctor, a ornare justo ultricies. Nulla eget ultricies magna, eu maximus augue. Suspendisse sed ligula sit amet mi feugiat iaculis. Fusce sagittis libero id feugiat consectetur. Pellentesque egestas ultrices scelerisque. Donec commodo quam purus, a hendrerit diam feugiat at. Pellentesque a justo a tellus vehicula convallis id sed magna. Vivamus id vestibulum nisl.

Fusce pulvinar libero non sapien placerat, eu ullamcorper turpis lobortis. Nam augue nibh, volutpat at augue eget, scelerisque congue odio. Suspendisse feugiat sollicitudin cursus. Mauris quis risus egestas, tincidunt sapien hendrerit, semper justo. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc scelerisque libero nec turpis dapibus, ac viverra turpis elementum. Nullam et ultricies urna. Maecenas augue purus, porta sed felis eget, pretium pretium lectus. Etiam a bibendum felis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce sed risus accumsan, porttitor orci et, consequat felis. Nam non bibendum libero. Maecenas pellentesque consectetur libero a congue. Vestibulum ultricies magna eget nisi mattis aliquam.    
</p>

css 文字在上方换行 - 而不是在图片下方

css wrap text above - not under image

css

word-wrap

一个简单的答案。