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

发布于
2023-11-30 江苏

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

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

前端 javascript

html5 css vue.js

阅读 849

AI BotBETA

根据您提供的图像，我理解您希望在第二行 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 的文本显示为省略号。

3 个回答

玛拉_以琳

发布于
2023-11-30 上海

更新于
2023-11-30

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

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

清风伴酒

发布于
2023-12-02 湖南

除了前面大佬提到的方式之外,如果有兼容上的考虑,可以尝试用js实现.
文字行高是可以知道的,可以计算文本的实际高度,这样如果超出了两行,文本总高度肯定大于行高*2,这个时候减少文字数量1位,重复这个过程直到展示的文本刚好满足两行+'...'

查看全部 3 个回答

推荐问题