边栏菜单标题在 AdminLte 中未正确显示

Sidebar menu title not showing properly in AdminLte

在 AdminLTE 主题中,当标题很长时,侧边栏菜单标题无法正确显示,它会中断行并在图标下方显示文本。 我希望它从第一行的第一个字母下方开始 我附上了截图 图片中 "consetetur" 应该从 "Lorem".

这个词的正下方开始

这是我的代码:

<li class="treeview">
<a href="#">
    <i class="fa fa-circle-o"></i>
    <span style="padding-right: 50px;white-space: normal;line-height:14px">
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod 
    </span>
    <span class="pull-right-container">
        <i class="fa fa-angle-left pull-right"></i>
    </span>
</a>
<ul class="treeview-menu" style="display: none;">
    <li>
        <a href="#">
            <div style="width:100%;display:inline-block">
                <div style="width:10%;float:left;padding-top: 5px;">
                    <i class=" fa fa-arrow-circle-right"></i> 
                </div>
                <div style="width:90%;float:right">
                    Lorem ipsum dolor
                </div>
            </div>
        </a>
    </li>
    <li>
        <a href="#">
            <div style="width:100%;display:inline-block">
                <div style="width:10%;float:left;padding-top: 5px;">
                    <i class=" fa fa-arrow-circle-right"></i> 
                </div>
                <div style="width:90%;float:right">
                    Lorem ipsum dolor
                </div>
            </div>
        </a>
    </li>
</ul>

关于使用

a {  display: table} a>* {  display: table-cell;}

显示

文本应该紧挨着图标开始

谢谢。

已更新

  1. 检查您的浏览器兼容性。对我来说,它在 chrome 中工作。
  2. 在不使用任何额外的 html 或 css 的情况下检查这一小部分。
  3. 检查您的 css 是否覆盖了此样式。

a {
  display: table
}

a>* {
  display: table-cell;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<a href="#">
  <i class="fa fa-car"></i>
  <span >
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod Lorem ipsum dolor sitLorem ipsum dolor sit Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod Lorem ipsum dolor sitLorem ipsum dolor sit
    </span>
</a>

我在@amit77309 的帮助下得到了解决方案。

需要添加以下样式:

.treeview > a {  display: table}
.treeview > a > *{  display: table-cell;}

谢谢。