javascript - 想请教各位巨佬一个布局如图，div宽高都固定，怎么在第二行超出时显示....?

Question

想请教各位巨佬一个布局如图，div宽高都固定，怎么在第二行超出时显示....

div宽高都固定，怎么在第二行超出时显示....

Answer 1

多行文本...用这个就行了

<div class="text">  浮动元素是如何定位的  正如我们前面提到的那样，当一个元素浮动之后，它会被移出正常的文档流，然后向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。</div><style>  .text {    width: 200px;    height: 38px;    display: -webkit-box;    -webkit-line-clamp: 2;    -webkit-box-orient: vertical;    overflow: hidden;  }</style>

Answer 2

根据您提供的图像，我理解您希望在第二行 div 超出父容器时显示省略号。这可以通过使用 CSS 的 text-overflow 属性来实现。以下是一个简单的示例代码：

HTML:

<div class="container">  <div class="item">Item 1</div>  <div class="item">Item 2</div>  <div class="item">Item 3</div>  <!-- 添加更多的 div --></div>

CSS:

.container {  width: 300px; /* 您指定的固定宽度 */  height: 200px; /* 您指定的固定高度 */  white-space: nowrap; /* 允许文本在一行内显示 */  overflow: hidden; /* 隐藏超出容器的文本 */}.item {  display: inline-block; /* 使 div 元素在一行内显示 */  width: 100px; /* 您指定的固定宽度 */  height: 50px; /* 您指定的固定高度 */  overflow: hidden; /* 隐藏超出 div 的文本 */  text-overflow: ellipsis; /* 当文本超出容器时显示省略号 */}

在上述代码中，.container 是父容器，其宽度和高度是固定的。.item 是子元素，它们的宽度和高度也是固定的。通过将 white-space 设置为 nowrap，我们确保文本在一行内显示。当文本超出父容器时，使用 overflow: hidden 来隐藏超出部分的文本。最后，将 text-overflow 设置为 ellipsis 使超出 div 的文本显示为省略号。