Question

我有一个javascript ui组件，可以创建一个堆叠的按钮列表（实际上是 ul＆gt; li 结构）。该组件用于报告软件，用户可以在其中设置按钮所在容器的大小，并且可以有任意数量的按钮。然后按钮需要填充用户设置的空间。文本需要垂直和水平居中。我在 ul 上使用了flexbox来控制按钮的布局，然后在 li 元素上再次使用flexbox来垂直和水平居中显示文本。但是，如果文本对于按钮来说太长，则会剪辑并且不会截断。

在不更改标记的情况下，是否可以使用CSS实现此目的？

修改另一个要求是文本需要用省略号（...）截断而不是换行。如果一个按钮包含一个非常长的自动换行不能解决问题。我用这样的例子更新了codepen。

HTML：

<div class="reportContainer">
  <ul class="segMBtn">
    <li class="segMBtn__btn">North</li>
    <li class="segMBtn__btn">East</li>
    <li class="segMBtn__btn">South</li>
    <li class="segMBtn__btn">West</li>
    <li class="segMBtn__btn">Something else really long that should truncate but doesn't want to truncate even though it should</li>
  </ul>
</div>

LESS / CSS：

.reportContainer {
  width:400px;
  height:300px;
  position:relative;
  margin:3rem;
}

.segMBtn {
  height:100%;
  width:100%;
  position:absolute;
  display:flex;
  flex-direction:column;
  border:solid 1px #ccc;
}

.segMBtn__btn {
  display:flex;
  border-top:solid 1px #ccc;
  flex:1 1 auto;
  text-align:center;
  justify-content:center;
  align-items:center;
  cursor:pointer;
  padding:0 1rem;
  box-sizing:border-box;

  white-space:nowrap;
  text-overflow:ellipsis; 
  overflow:hidden;
  width:100%;

  &:hover {
    background:#ececec;
  }

  &:active {
    background:#cdcdcd;
  }

  &:first-child {
    border-top:none;
  }
}

Codepen： http://codepen.io/tjkrumm/pen/jAkZVa

Answer 1

在课堂上.segMBtn__btn删除white-space:nowrap;

.reportContainer {
  width:400px;
  height:300px;
  position:relative;
  margin:3rem;
}

.segMBtn {
  height:100%;
  width:100%;
  position:absolute;
  display:flex;
  flex-direction:column;
  border:solid 1px #ccc;
}

.segMBtn__btn {
  display:flex;
  border-top:solid 1px #ccc;
  flex:1 1 auto;
  text-align:center;
  justify-content:center;
  align-items:center;
  cursor:pointer;
  padding:0 1rem;
  box-sizing:border-box;
  text-overflow:ellipsis; 
  overflow:hidden;
  width:100%;

  &:hover {
    background:#ececec;
  }
  
  &:active {
    background:#cdcdcd;
  }
  
  &:first-child {
    border-top:none;
  }
}

<div class="reportContainer">
  <ul class="segMBtn">
    <li class="segMBtn__btn">North</li>
    <li class="segMBtn__btn">East</li>
    <li class="segMBtn__btn">South</li>
    <li class="segMBtn__btn">West</li>
    <li class="segMBtn__btn">Something else really long that should truncate but doesn't want to truncate even though it should</li>
  </ul>
</div>

截断文本不能直接在Flex容器中工作

1 个答案: