如果文本不适合 span，则将其换行

Question

我有一个面板分为两部分：左面板和右面板。在右侧面板中，我有未排序的元素列表，它确实有元素列表。每个 li 都有标签，标签有 2 个跨度，一个用于图标文件和并排的文本内容。

目前：当文本长度增加时，整个跨度将移至新行。跨度不再并排。

我需要实现，span1 和 span2 应该并排，当 span2 中的文本增加时，span 2 应该垂直增长而不是完全移动到新行。

.left_side_panel{
float: left;
width:50%;
padding-right:1.25rem;
}
.right_side_panel{
float: right;
width:20%;
padding-left:1.25rem;
}
.Panel_Info_Contents{
margin-bottom:3.75rem;
}
.userguide{
list-style: none;
}
.userguide li{
border: 5px solid yellow;
display: block;
min-height: 1.75rem;
margin-bottom:0.625rem;
}
a{
cursor: pointer;
color:#ffff;
text-decoration:none;
}
.guide_icon--file{
border: 2px solid green;
display: inline-block;
vertical-align:middle;
margin-right:0.625rem;
width:1.75rem;
height: 1.75rem;
background-repeat: no-repeat;
}
.guide_entrydetails{
display: inline-block;
vertical-align: middle;
color:red;
border: 2px solid blue;
}

<div class="client">
    <div class="middlePanel__client__overview">
      <div class="left_side_panel">
      </div>
      <div class="right_side_panel">
        <div class="Panel_Info_Contents">
            <ul class="userguide">
                <li>
                    <a title="user guide hand book and some more details to reproduce the issue" href="">
                        <span class="guide_icon--file">
                        </span>
                        <span class="guide_entrydetails">
                            user guide hand book and some more details to reproduce the issue and some more things and some more
                        </span>
                    </a>
                </li>
            </ul>
            <ul>
            </ul>
        </div>
      </div>
    </div>
  </div>

jsfiddle

Expected outcome

Answer 1

Flexbox 可以做到这一点：

.left_side_panel {
  float: left;
  width: 50%;
  padding-right: 1.25rem;
}

.right_side_panel {
  float:right;
  width: 50%; /* for demo purposes */
  padding-left: 1.25rem;
}

.Panel_Info_Contents {
  margin-bottom: 3.75rem;
}

.userguide {
  list-style: none;
}

.userguide li {
  border: 5px solid yellow;
  display: block;
  min-height: 1.75rem;
  margin-bottom: 0.625rem;
}

a {
  display: flex; /* this */
  cursor: pointer;
  text-decoration: none;
}

.guide_icon--file {
  border: 2px solid green;
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.625rem;
  width: 1.75rem;
  height: 1.75rem;
  background-repeat: no-repeat;
}

.guide_entrydetails {
  display: inline-block;
  vertical-align: middle;
  color: red;
  border: 2px solid blue;
}

<div class="client">
  <div class="middlePanel__client__overview">
    <div class="left_side_panel">
    </div>
    <div class="right_side_panel">
      <div class="Panel_Info_Contents">
        <ul class="userguide">
          <li>
            <a title="user guide hand book and some more details to reproduce the issue" href="">
              <span class="guide_icon--file">I
                        </span>
              <span class="guide_entrydetails">
                            user guide hand book and some more details to reproduce the issue and some more things and some more
                        </span>
            </a>
          </li>
        </ul>
        <ul>
        </ul>
      </div>
    </div>
  </div>
</div>

如果文本不适合 span，则将其换行

break the text in new line if it doesnt fit in span

html

css

responsive-design