解决flex盒子被内容撑开以及如何显示两行文本后省略
要解决Flex盒子被内容撑开的问题，可以使用CSS的min-width和max-width属性来限制Flex容器的最小和最大宽度，或者使用width属性来固定宽度。如果你希望在文本超过两行后显示省略符号（...），可以使用CSS的text-overflow、white-space和overflow属性。
以下是实现这些功能的CSS样式和HTML结构的示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex Box Example</title>
<style>
.flex-container {
display: flex; /* 使用Flex布局 */
width: 200px; /* 设置固定宽度 */
min-height: 50px; /* 设置最小高度 */
background-color: lightblue; /* 设置背景颜色 */
margin: 10px; /* 外边距 */
padding: 10px; /* 内边距 */
box-sizing: border-box; /* 盒子模型包括内边距和边框 */
}
.text {
flex: 1; /* 允许伸展，占据剩余空间 */
overflow: hidden; /* 超出部分隐藏 */
text-overflow: ellipsis; /* 文本溢出显示省略符号 */
white-space: nowrap; /* 不换行 */
max-height: 34px; /* 最大高度 */
line-height: 1.2; /* 行高 */
display: -webkit-box; /* 用于显示两行文本 */
-webkit-line-clamp: 2; /* 限制在两行 */
-webkit-box-orient: vertical; /* 垂直排列 */
}
</style>
</head>
<body>
<div class="flex-container">
<div class="text">这里是一些很长的文本，如果超过两行将会显示省略符号...</div>
</div>
</body>
</html>在这个例子中，.flex-container是一个Flex容器，.text是它的子元素，该子元素将会显示文本内容。通过CSS样式，.text被设置为当内容超过两行后显示省略符号，并且不会因为内容的增长而撑开Flex容器的高度。
评论已关闭