Javascript 如何使用flexbox将文本垂直居中放置在固定高度的div中，而不会在上方溢出？

第三个

.box

中的第一行文本升高到div顶部上方并被截断。我希望它看起来与第二个框相同（实际上，理想情况下，就像第二个框加上一个

…

）

这可以用flexbox完成吗

如果没有，可以用其他CSS来完成吗

如果不是，那么用JS做这件事的最佳方式是什么

另外，为什么第一个框的文本中心没有对齐

一行文字
两行文字lorem ipsum
这几行文字都是关于“知识、权利、义务”等的
.盒子
高度40px
字体大小16px
宽度150px
边框1px纯黑
边缘底部40px
显示柔性
将项目对齐到中心
文本居中对齐
溢出y隐藏

问题1/2

对!！您可以使用flexbox执行此操作：

.box{
/*火狐*/
显示：-moz flex；
-moz-justify-content:center；
-moz对齐项目：居中；
/*即*/
显示：-ms flex；
-ms内容：中心；
-ms对齐项目：居中；
/*铬之旅*/
显示：-webkit flex；
-webkit内容：中心；
-webkit对齐项目：居中；
/*现代浏览器*/
显示器：flex；
证明内容：中心；
对齐项目：居中；
高度：40px；
宽度：150px；
溢出：隐藏；
边框：1px纯黑；
边缘底部：40px；
字体大小：16px；
文本对齐：居中；
}
.截断{
空白：nowrap；
溢出：隐藏；
-ms文本溢出：省略号；/*IE*/
-o-text-overflow:省略号；/*Opera*/
文本溢出：省略号；/*其他浏览器*/
}

一行文本
两行文字lorem ipsum

所有文本行，如lorem ipsum sin dolor等

您只需将单行文本包装成一个

并给它一个宽度，就可以将其居中放置

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

div.box > span { width: 100%; }

在向溢出文本中添加省略号（“…”）方面，是的，这是可能的，但多行文本很棘手

CSS有一个属性，它接受多个值，包括

省略号
。不幸的是，
省略号
仅适用于单行文本

CSS没有为多行文本应用省略号提供标准方法。有各种各样的解决办法，但根据方法和情况，它们可能是偶然的。有关更多详细信息，请参见我的回答：
当
对齐自我
计算到
居中时，弹性项位于直线内横轴的中心

如果flex项目比flex容器大，这是有问题的，因为它会从上面和下面溢出。如果
溢出
不可见
，则上部将被切割

要避免这种情况，可以使用以下方法居中：


.box{
显示器：flex；
高度：40px；
宽度：150px；
溢出：自动；
边框：1px纯黑；
边缘底部：20px；
字体大小：16px；
文本对齐：居中；
}
.box>div{
保证金：自动；
}

一行文字
两行文字lorem ipsum
这几行文字都是关于“知识、权利、义务”等的
我认为单行左对齐的原因是因为flex direction属性的默认值为row，因此每个框的内容都变成了一个尽可能小（窄）的单个flex项，然后从左侧水平放置。对于较长的文本，项目将强制为完整的可用宽度，然后文本将居中（由于文本对齐）。设置“弹性方向：列”
会更改：弹性项然后水平展开。。。但不是垂直的，因此失去了垂直居中。在第一个框中，文本相对于包装它的匿名flex项居中，但flex项相对于flex容器不居中。您可以使用flex容器上的
justify content:center
来修复它。如果您可以选择flex项目，也可以使用
flex grow:1
或
width:100%
使其增长到覆盖所有容器，或使用
margin:0 auto
将其推到中间。谢谢！CSS有没有办法让第二个和第三个框显示两行文本？（只有第三个框带有省略号）在CSS中不能截断多行，必须使用简洁；）谢谢，如何让第二个和第三个框显示两行没有省略号的文本？
<div class='box'>
   <span>one line of text</span>
</div>

div.box > span { width: 100%; }

.box {
    display: flex;
    align-items: center; /* center vertically */
    justify-content: center; /* center horizontally */
    height: 40px;
    font-size: 16px;
    width: 150px;
    border: 1px solid black;
    margin-bottom: 40px;
    text-align: center;
    overflow-y: hidden;
}