css - Foundation 6.4.1 - 如何修复下拉菜单的宽度？

Question

如何固定下拉菜单项的宽度？

.row,
.grid-container {
  border: 1px solid blue;
}

.menu>li>a {
  line-height: 40px;
}

.menu>li>a:hover {
  border-bottom: 1px solid red;
}

.menu ul li a {
  line-height: normal;
  width: 100%;
  text-align: center;
}

.menu ul li:hover {
  background-color: #eee;
}

.menu ul {
  max-width: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.1/css/foundation.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.1/js/foundation.min.js"></script>

<div class="row">
  <ul class="menu align-center dropdown" data-dropdown-menu>
    <li>
      <a href="#">One</a>
      <ul class="menu vertical">
        <li><a href="#">One One One One One very long title</a></li>
        <li><a href="#">Two</a></li>
        <li><a href="#">Three</a></li>
      </ul>
    </li>
    <li><a href="#">Two</a></li>
    <li><a href="#">Three</a></li>
    <li><a href="#">Four</a></li>
  </ul>
</div>

<script>
  $(document).foundation();
</script>

如您所见，我已将下拉菜单项固定为 200px，但带有长文本的元素在外框内运行。如何固定宽度以使文本始终在框内？正确的做法是什么？如果文本很长，则应将文本分成多行。

这可能吗？

Answer 1

尝试添加这个类“ul.vertical li a”

并在a标签中添加title

.row,
.grid-container {
  border: 1px solid blue;
}

.menu>li>a {
  line-height: 40px;
}

.menu>li>a:hover {
  border-bottom: 1px solid red;
}

.menu ul li a {
  line-height: normal;
  width: 100%;
  text-align: center;
}

.menu ul li:hover {
  background-color: #eee;
}
ul.vertical li a {
display: inline-block;
max-width: 100%;
white-space: nowrap;
overflow: hidden!important;
text-overflow: ellipsis;
}
.menu ul {
  max-width: 100px;
}
.dropdown.menu>li.opens-right>.is-dropdown-submenu{
min-width: 100px !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.1/css/foundation.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.1/js/foundation.min.js"></script>

<div class="row">
  <ul class="menu align-center dropdown" data-dropdown-menu>
    <li>
      <a href="#">One</a>
      <ul class="menu vertical">
        <li><a href="#" title="One One One One One very long title<">One One One One One very long title</a></li>
        <li><a href="#">Two</a></li>
        <li><a href="#">Three</a></li>
      </ul>
    </li>
    <li><a href="#">Two</a></li>
    <li><a href="#">Three</a></li>
    <li><a href="#">Four</a></li>
  </ul>
</div>

<script>
  $(document).foundation();
</script>