Question

 <li class="menuitem item ">
    <a href="http://localhost:8000/SupplierTenderCreate.php?New=Yes">

        <span>Create a New Tender</span>

    </a>
</li>

并且工作正常但是这些是侧边菜单中的选项，所以有时候给出选项名称的span标签有很多文本，我想让它具有一个确定的宽度，如果它超过它放置的宽度一条突破线

我试过

.menuitem .item > a > span{
  display:block;
  width: 150px;
  word-break: break-all;
}

但它不起作用我也知道使用div会更好但我无法改变它

Answer 1

您的选择器出错。您的列表项有两个类'menuitem'和'item'。如果要匹配它们，请将选择器更改为.menuitem.item > a > span，从而有效消除它们之间的空间。所以试试

.menuitem.item > a > span {
  display:block;
  width: 150px;
  word-break: break-all;
}

Answer 2

你两次打电话给同一个父母：

.menuitem与.item

的元素相同

试试这个：

.menuitem > a > span{}

<强> JSFiddle

Answer 3

仅为选择器

提供.item > a > span

.item > a > span{
  display:block;
  width: 150px;
  word-break: break-all;
}

<li class="menuitem item ">
    <a href="http://localhost:8000/SupplierTenderCreate.php?New=Yes">

        <span>Create a New Tender</span>

    </a>
</li>

如果文本太大，如何使span标签执行换行？

3 个答案: