Html 如果单行显示省略号,则在div中居中显示文本

Html 如果单行显示省略号,则在div中居中显示文本,html,css,Html,Css,我需要在一个div中显示最多两行文本,如果文本超过两行,则在两行文本的末尾显示省略号 +------------------------+ | Some text for test and | | Some text for test ... | +------------------------+ 另外,若文本只有一行,那个么我需要在div中间显示这一行,左对齐。(下面的示例显示了三行和文本,但应该是两行:)) 目前我正在使用以下代码: .mainDiv{ 字体大小:10px; 最小高度:

我需要在一个div中显示最多两行文本,如果文本超过两行,则在两行文本的末尾显示省略号

+------------------------+
| Some text for test and |
| Some text for test ... |
+------------------------+
另外,若文本只有一行,那个么我需要在div中间显示这一行,左对齐。(下面的示例显示了三行和文本,但应该是两行:))

目前我正在使用以下代码:

.mainDiv{
字体大小:10px;
最小高度:10px;
最大高度:20px;
线高:10px;
显示:-网络工具包盒;
-webkit线夹:2个;
-网络工具包盒方向:垂直;
文本溢出:省略号;
溢出:隐藏;
}

一些测试文本

您可以分别使用
display:table cell
display:table
将您的
mainDiv
包装在两个div中。然后,
垂直对齐:在单元格上居中

您只需将最外层的
div
设置为所需的高度

.mainDiv{
字体大小:14px;
最小高度:10px;
最大高度:20px;
线高:10px;
显示:-网络工具包盒;
-webkit线夹:2个;
-网络工具包盒方向:垂直;
文本溢出:省略号;
溢出:隐藏;
}
.集装箱{
显示:表格单元格;
垂直对齐:中间对齐;
边框:1px纯红;
宽度:100px;
高度:100px;
}
.包装纸{
显示:表格;
}

文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
文本文本文本

@GauravAggarwal链接的副本无法解决OP的居中问题condition@GauravAggarwal当你将两个问题、省略号和中间单行文字组合在一起时,问题就开始了,所以我问了这个问题,在发布新问题之前我也看到了这两个问题。@GauravAggarwa请检查更新的部分
+------------------------+
|                        |  
| Some text for test and |
|                        |  
+------------------------+