Question

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

我正在使用antd react库，因此如果不修改库代码，我在生成html标记方面就没有太大的灵活性。但是，我确实可以控制样式表。

这是Antd Tree Component生成的组件的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-但我无法成功获得结果

这是它呈现的内容： Current Render

这就是我要渲染的：Targeted Render

Answer 1

如果您希望文本保持在一定范围内，最简单的方法可能是将内联元素（例如spans）显示为块而不是内联并操纵其宽度和高度。或者，您也可以直接使用flex，只需将li设置为display: flex。

然后可以使用flex-grow和其他子属性，这里是great flexbox reference。

#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>

Answer 2

您可以通过将display: flex添加到li

来实现此目的。

#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>

Answer 3

您可以将.myTitle更改为inline-block并为其设置宽度。

#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>

如何将内联块换行符（换行后）向右推？

3 个答案: