如何使用flexbox在垂直中心文本在固定高度的div，而不溢出上面？ [英] How can you use flexbox to vertically center text in a fixed-height div without overflowing above?

问题描述

第三个 .box 中的第一行文字被放在div的顶部并剪掉。我想它看起来与第二个框相同（实际上理想情况下，像第二个框加一个 ... ）。

1. 可以使用flexbox吗？


2. 如果没有，可以使用其他CSS


3. 如果没有，使用JS的最好方法是什么？


4. 另外，为什么不是第一个框的文本中心对齐？

http://codepen.io/loren/pen/ojxORN

 < div class ='box'> 
一行文字
< / div> 
 
< div class ='box'> 
两行文本lorem ipsum 
< / div> 
 
< div class ='box'> 
三行文本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 
  

align-self 计算中心时， flex项目的中心在交叉轴线内。

这是有问题的，如果flex项目大于flex容器，因为它会从上下溢出它。在溢出不是可见的情况下，上部将被剪切。

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

  .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;}  

 < div class = 'box'> < div>一行文字< / div>< / div>< div class ='box'> < div>两行文字lorem ipsum< / div>< / div>< div class ='box'> < div>三行文字lorem ipsum sin dolor any etc< / div>< / div>  

注意 margin：auto 需要添加到每个flex项目。但是，您不能选择在flex容器中包装连续文本的匿名flex项。因此，我将文本包装在 div 元素中，可以选择。

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

  .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;}  

 < div class = 'box'>一行文字< / div>< div class ='box'>两行文本lorem ipsum< / div>< div class ='box'> thre lines of text lorem ipsum sin dolor whatever etc< / div>  

The first line of text in the third .box is raised above the top of the div and cut off. I would like it to appear the same as the second box (well actually ideally like the second box plus a ...).

1. Can this be done with flexbox?
2. If not, can it be done with other CSS?
3. If not, what's the best way to do it with JS?
4. And on a separate note, why isn't the first box's text center-aligned?

http://codepen.io/loren/pen/ojxORN

<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

解决方案

When align-self computes to center, the flex item is centered in the cross axis within the line.

That's problematic if the flex item is bigger than the flex container, because it will overflow it both from above and below. And in case overflow is not visible, the upper part will be cut.

To avoid this, you can center by using auto margins:

.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;
}

<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>

Note margin: auto needs to be added to each flex item. However, you can't select the anonymous flex item which wraps contiguous run of texts in the flex container. Therefore, I wrapped the text in div elements, which can be selected.

If you don't want to alter the HTML, you can use pseudo-elements.

.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;
}

<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>

这篇关于如何使用flexbox在垂直中心文本在固定高度的div，而不溢出上面？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！