Question

看看这两个按钮，用Bootstrap设置：

＆＃13;

body { margin: 10px !important; }

button.limited-text-length span.text {
  width: 50px;
  display: inline-block;
  overflow-x: hidden;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<button class="btn" type="button">
  <span class="text">Dropdown</span>
  <span class="caret"></span>
</button>

<button class="btn limited-text-length" type="button">
  <span class="text">Dropdown</span>
  <span class="caret"></span>
</button>

＆＃13;

在第二个版本中，我尝试通过设置width，display: inline-block和overflow-x: hidden来强制限制标签的长度。但是，正如您所看到的，这会导致下拉三角形向下移动。为什么这样，我怎么能正确地做到这一点？

Answer 1

您将范围转换为inline-block。添加vertical-align:middle会将内联块项目放在行的中间。

＆＃13;

body { margin: 10px !important; }

button.limited-text-length span.text {
  width: 50px;
  display: inline-block;
  vertical-align: middle;
  overflow-x: hidden;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<button class="btn" type="button">
  <span class="text">Dropdown</span>
  <span class="caret"></span>
</button>

<button class="btn limited-text-length" type="button">
  <span class="text">Dropdown</span>
  <span class="caret"></span>
</button>

＆＃13;

当我尝试限制引导按钮文本的长度时，为什么插入符号会移动？

1 个答案: