display: -webkit-box 导致文本环绕图片失效,并且保证文本只占用两行,超出显示省略号
时间: 2024-10-01 22:10:44 浏览: 46
display: -webkit-box;
是Webkit内核(如早期版本的Safari和Chrome)引入的一个CSS样式,它用于创建弹性布局,类似于Flexbox。当你将文本围绕着图片设置成 -webkit-box
属性时,可能会遇到预期之外的行为,因为 -webkit-box
更多地关注容器内的项目如何分配空间,而不是内容的排列方式。
如果你想要文本仅环绕图片显示,并且当文本超过两行时自动换行并显示省略号,应该使用 display: flex
或 display: inline-flex
以及相关的CSS属性:
.container {
display: flex;
align-items: center; /* 文本会居中对齐 */
overflow-wrap: break-word; /* 如果文字太长会自动换行 */
white-space: nowrap; /* 防止默认的换行 */
text-overflow: ellipsis; /* 文字超出部分显示省略号 */
}
.text {
flex: 1; /* 自适应宽度,如果图片宽度固定,可以让文本占据剩余空间 */
}
在这个例子中,.container
容器设置了 flex
布局,.text
子元素则可以容纳多行文本。如果文本超过了两行,就会按照设定的方式进行换行和省略。