如何将内联块换行文本(换行符后)向右推

我在开发目录树时遇到了一个问题，当项目的文本超过容器宽度时，通过 <ul> 完成。

我正在使用 antd react 库，所以我在没有修改库代码的情况下生成 html 标记没有太大的灵活性。但是，我确实可以控制样式表。

以下是 Antd Tree 组件生成的组件的 html 标记(为了便于阅读，进行了一些修改(：

<div id="container">
  <ul>
    <li>
      <span class="myicon">
        <i aria-label="icon: down" class="anticon anticon-down ant-tree-switcher-icon"><svg viewBox="64 64 896 896" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i> 
      </span>
      <span class="myTitle">
        <span>Compliance, objectives and functional statments</span>
      </span>
    </li>
  </ul>
</div>

这是当前的 css：


#container {
  width: 260px; background-color: #f1f1f1;
}
.myicon, .myTitle, ul, li {
  padding: 0;
  margin: 0;
}
.myicon {
    display: inline-block;
    width: 44px;
    line-height: 24px;
    text-align: center;
    vertical-align: top;
    float:left;
}
.myTitle {
    display: inline;
    line-height: 24px;
    vertical-align: top;
}
ul {
    list-style: none;
    height: 100%;
    box-sizing: border-box;
    font-size: 14px;
}
li {
    white-space: break-spaces;
}

小提琴：https://jsfiddle.net/gLqosjmp/6/

我试过什么？

使myicon height大得离谱，但它会影响后续 <li>
修改两个类的wrap white-space和display - 但我无法成功获得结果

这是它呈现的内容：当前渲染

这就是我想要渲染的：目标渲染

如果您希望文本保持在一定的边界内，最简单的方法可能是将内联元素(例如spans(显示为块而不是内联并操作它们的宽度和高度。或者你可以直接使用flex，只需将li设置为display: flex即可。

然后，您可以使用flex-grow和其他子属性，这是一个很好的弹性框参考。

#container {
  width: 260px; background-color: #f1f1f1;
}
.myicon, .myTitle, ul, li {
  padding: 0;
  margin: 0;
}
.myicon {
    display: inline-block;
    width: 44px;
    line-height: 24px;
    text-align: center;
    vertical-align: top;
    float:left;
}
.myTitle {
    display: inline;
    line-height: 24px;
    vertical-align: top;
}
ul {
    list-style: none;
    height: 100%;
    box-sizing: border-box;
    font-size: 14px;
}
li {
    display: flex;
    white-space: break-spaces;
}

<div id="container">
  <ul>
    <li>
      <span class="myicon">
        <i aria-label="icon: down" class="anticon anticon-down ant-tree-switcher-icon"><svg viewBox="64 64 896 896" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i> 
      </span>
      <span class="myTitle">
        <span>Compliance, objectives and functional statments</span>
      </span>
    </li>
  </ul>
</div>

您只需

向li添加display: flex即可实现此目的

#container {
  width: 260px;
  background-color: #f1f1f1;
}
.myicon,
.myTitle,
ul,
li {
  padding: 0;
  margin: 0;
}
.myicon {
  display: inline-block;
  width: 44px;
  line-height: 24px;
  text-align: center;
  vertical-align: top;
  float: left;
}
.myTitle {
  display: inline;
  line-height: 24px;
  vertical-align: top;
}
ul {
  list-style: none;
  height: 100%;
  box-sizing: border-box;
  font-size: 14px;
}
li {
  /*The only change*/
  display: flex;
}

<div id="container">
  <ul>
    <li>
      <span class="myicon">
        <i aria-label="icon: down" class="anticon anticon-down ant-tree-switcher-icon"><svg viewBox="64 64 896 896" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i> 
      </span>
      <span class="myTitle">
        <span>Compliance, objectives and functional statments</span>
      </span>
    </li>
  </ul>
</div>

您可以将 .myTitle 更改为内联块并为其设置宽度。

#container {
  width: 260px; background-color: #f1f1f1;
}
.myicon, .myTitle, ul, li {
  padding: 0;
  margin: 0;
}
.myicon {
    display: inline-block;
    width: 44px;
    line-height: 24px;
    text-align: center;
    vertical-align: top;
    float: left;
}
.myTitle {
    display: inline-block;
    line-height: 24px;
    vertical-align: top;
    width: 210px;
}
ul {
    list-style: none;
    height: 100%;
    box-sizing: border-box;
    font-size: 14px;
}
li {
    white-space: break-spaces;
}

<div id="container">
  <ul>
    <li>
      <span class="myicon">
        <i aria-label="icon: down" class="anticon anticon-down ant-tree-switcher-icon"><svg viewBox="64 64 896 896" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i> 
      </span>
      <span class="myTitle">
        <span>Compliance, objectives and functional statments</span>
      </span>
    </li>
  </ul>
</div>

相关内容

最新更新

热门标签：