Question

我希望用Span书写的长文本应该换行并且应该有正当理由。文字不应位于图标下方。

以下是我正在使用的代码，

<style>
  .widgets_div .text_div {
    display: inline-block;
    margin-left: 10px;
  }
  
  .widgets_div .icon_div {
    display: inline-block;
    margin-left: 15px;
  }
</style>


<div class="widgets_div">
  <div class="icon_div">
    <span><i class="fa fa-calendar"></i></span>
  </div>
  <div class="text_div">
    <span>Upcoming Events This Is A Very Long Text Which May Wrap Into The Browser According to the width of the Browser But I am Not Sure how much your browser width will be so I am keep on writing this Dummy text so that at some point of time this whole useless text will be wrapped and my purpose will be fulfill</span><br>
    <span>Description</span>
  </div>
</div>

Answer 1

更改CSS样式

.widgets_div .text_div {
    display: inline-block;
    margin-left: 10px;
    width:calc(100% - 60px);
    vertical-align:middle;
}
.widgets_div .icon_div {
    display: inline-block;
    margin-left: 15px;
    width:30px;
    vertical-align:middle;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="widgets_div">
  <div class="icon_div">
    <span><i class="fa fa-calendar"></i></span>
  </div>
  <div class="text_div">
    <span>Upcoming Events This Is A Very Long Text Which May Wrap Into The Browser According to the width of the Browser But I am Not Sure how much your browser width will be so I am keep on writing this Dummy text so that at some point of time this whole useless text will be wrapped and my purpose will be fulfill</span><br>
    <span>Description</span>
  </div>
</div>

Answer 2

另一个没有垂直对齐的解决方案，

  .widgets_div .text_div {
    display: inline-block;
    margin-left: 25px;
    margin-top: -20px
   }
  .widgets_div .icon_div {
    display: inline-block;
    margin-left: 15px;
  }

  <div class="widgets_div">
    <div class="icon_div">
     <span><i class="fa fa-calendar"></i></span>
     <div class="text_div">
      <span>Upcoming Events This Is A Very Long Text Which May Wrap Into The Browser According to the width of the Browser But I am Not Sure how much your browser width will be so I am keep on writing this Dummy text so that at some point of time this whole useless text will be wrapped and my purpose will be fulfill</span><br>
      <span>Description</span>
     </div>
    </div>

  </div>

自动换行后如何对齐图标和文本？

2 个答案: