Question

第三个.box中的第一行文字被提升到div的顶部并被切断。我希望它看起来与第二个框相同（实际上理想情况下像第二个框加上...）。

这可以用flexbox完成吗？
如果没有，可以用其他CSS完成吗？
如果没有，用JS做到最好的方法是什么？
另外，为什么第一个框的文本中心对齐？

<div class='box'>
  one line of text
</div>

<div class='box'>
  two lines of text lorem ipsum
</div>

<div class='box'>
  thre lines of text lorem ipsum sin dolor whatever etc
</div>

.box 
  height 40px
  font-size 16px
  width 150px
  border 1px solid black
  margin-bottom 40px
  display flex
  align-items center
  text-align center
  overflow-y hidden

Answer 1

当align-self计算到center时，弹性项目位于该行内的横轴中心。

如果flex项比flex容器大，那就有问题，因为它会从上方和下方溢出它。如果overflow不是visible，则会删除上半部分。

为避免这种情况，您可以使用auto margins：

进行居中

＆＃13;

.box {
  display: flex;
  height: 40px;
  width: 150px;
  overflow: auto;
  border: 1px solid black;
  margin-bottom: 20px;
  font-size: 16px;
  text-align: center;
}
.box > div {
  margin: auto;
}

＆＃13;

<div class='box'>
  <div>one line of text</div>
</div>
<div class='box'>
  <div>two lines of text lorem ipsum</div>
</div>
<div class='box'>
  <div>thre lines of text lorem ipsum sin dolor whatever etc</div>
</div>

＆＃13;

注意margin: auto需要添加到每个弹性项目中。但是，您无法选择在Flex容器中包装连续文本的匿名弹性项目。因此，我将文本包装在div元素中，可以选择这些元素。

如果您不想更改HTML，可以使用伪元素。

＆＃13;

.box {
  display: flex;
  flex-direction: column;
  height: 40px;
  width: 150px;
  overflow: auto;
  border: 1px solid black;
  margin-bottom: 40px;
  font-size: 16px;
  text-align: center;
}
.box::before, .box::after {
  content: '';
  margin-top: auto;
}

＆＃13;

<div class='box'>
  one line of text
</div>
<div class='box'>
  two lines of text lorem ipsum
</div>
<div class='box'>
  thre lines of text lorem ipsum sin dolor whatever etc
</div>

＆＃13;

Answer 2

问题1/2

是的！你可以使用flexbox：

＆＃13;

.box {
  /* Firefox */
  display: -moz-flex;
  -moz-justify-content: center;
  -moz-align-items: center;

  /* IE */
  display: -ms-flex;
  -ms-justify-content: center;
  -ms-align-items: center;

  /* Chrome | Safari */
  display: -webkit-flex;
  -webkit-justify-content: center;
  -webkit-align-items: center;

  /* Modern browsers */
  display: flex;
  justify-content: center;
  align-items: center;

  height: 40px;
  width: 150px;
  overflow: hidden;
  border: 1px solid black;
  margin-bottom: 40px;
  font-size: 16px;
  text-align: center;
}

.truncate {
  white-space: nowrap;
  overflow: hidden;
  -ms-text-overflow: ellipsis;  /* IE */
  -o-text-overflow: ellipsis;   /* Opera */
  text-overflow: ellipsis;      /* Other browsers */
}

＆＃13;

<div class='box'>
  <p class="truncate">one line of text<p>
</div>

<div class='box'>
  <p class="truncate">two lines of text lorem ipsum<p>
</div>

<div class='box'>
  <p class="truncate">thre lines of text lorem ipsum sin dolor whatever etc<p>
</div>

＆＃13;

如果您想使用Sass / SCSS和Compass，您的样式表将如下：

@import 'compass';

.box {
  @include flexbox((
    display: flex,
    justify-content: center,
    align-items: center 
  ), 1 2 3);
  height: 40px;
  width: 150px;
  overflow: hidden;
  border: 1px solid black;
  margin-bottom: 40px;
  font-size: 16px;
  text-align: center;
}

.truncate {
  @include ellipsis();
}

问题3

只有当您想要在多行中截断文本时才需要Javascript（在第二行/第三行等等）因此，如果它是单行，CSS是正确的方法。否则使用Succinct

问题4

由于.box具有display: flex属性，您无法看到文字居中。删除它，你会看到它居中

如何使用flexbox在固定高度div中垂直居中文本而不溢出？

2 个答案: