内容不标题：只用一个div，宽高固定（width: 100px; height: 50px;），文本内容不固定，如何实现水平、垂直居中，超出两行显示省略号？

只用一个div，宽高固定，文本内容不固定，能不能实现水平、垂直居中，超出两行显示省略号？

AI BotBETA

要实现这个效果，你需要使用CSS的display: flex进行水平和垂直居中，同时使用line-height和overflow属性来处理文本的省略号显示。但是，直接控制文本只显示两行并省略超出部分在CSS中是一个挑战，因为CSS没有直接的方式来指定“只显示两行”。不过，你可以通过指定一个大致的line-height和max-height来近似实现这一效果。

以下是一个可能的解决方案：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Centering and Ellipsis</title>
<style>
  .container {
    width: 100px;
    height: 50px;
    display: flex;
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    overflow: hidden; /* 隐藏溢出内容 */
    text-overflow: ellipsis; /* 显示省略号 */
    white-space: nowrap; /* 保持文本在一行内 */
    line-height: 25px; /* 设置行高为容器高度的一半（假设只显示两行） */
    max-height: 50px; /* 限制最大高度 */
    /* 注意：这里的实现只能保证一行文本的水平居中显示省略号
       对于多行文本，CSS本身不直接支持基于行数的省略号截断。
       这里只是为了演示如何使用flex进行居中，并通过line-height和max-height进行近似处理。
       对于多行文本的省略，可能需要使用JavaScript或服务器端处理。 */
    
    /* 如果需要支持多行文本的省略，可以使用以下伪元素方法（但这里只演示单行的）*/
    /*
    display: -webkit-box;
    -webkit-line-clamp: 2; /* 限制显示两行 */
    -webkit-box-orient: vertical;
    */
  }
</style>
</head>
<body>
<div class="container">这是一段很长的文本，需要居中显示，并且超出部分显示省略号。</div>
</body>
</html>

注意：

上面的示例中，我使用了line-height和max-height来尝试控制文本的显示行数，但这并不是精确的解决方案，特别是当字体大小或文本内容导致行高不一致时。
对于真正的多行文本省略，CSS没有直接的属性来实现。通常，你可以使用-webkit-line-clamp属性（注意它不是一个标准的CSS属性，主要在WebKit和Blink引擎的浏览器中受支持），但这种方法会改变容器的display属性，并且可能无法与flex布局直接兼容。
在实践中，如果你需要支持多行文本的省略，并且需要高度的兼容性和灵活性，你可能需要使用JavaScript或服务器端逻辑来处理文本的截断和省略号的添加。

3 个回答

得票最新

toesbieya

2.1k84370

发布于
10 月 24 日福建

更新于
10 月 24 日

✓ 已被采纳

非要一个div的话，可以用before、after这样的伪元素去当span，只不过无法选择

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .div {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 300px;
      height: 500px;
      overflow: hidden;
      border: 1px solid black;
    }

    .div::before {
      content: '肯定撒开了房间啦睡觉咯开发九里峰景啦上飞机了卡是否健康啦睡觉房间啊算了解放路卡视角按时计费拉屎';
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  </style>
</head>
<body>
<div class="div"></div>
</body>
</html>

Seven

587116

发布于
10 月 24 日广东

更新于
10 月 25 日

主要使用了 CSS Flexbox 和 WebKit 特性来实现文本的多行截断和居中对齐
方法一
div里嵌套span

div {
  width: 100px; /* 设置 div 的宽度为 100 像素 */
  height: 50px; /* 设置 div 的高度为 50 像素 */
  display: flex; /* 使用 Flexbox 布局 */
  border: 1px solid red; /* 设置 div 的边框为红色，宽度为 1 像素 */
  justify-content: center; /* 水平居中对齐内容 */
  align-items: center; /* 垂直居中对齐内容 */
  text-align: center; /* 文本居中对齐 */
  overflow: hidden; /* 隐藏超出 div 边界的内容 */
  text-overflow: ellipsis; /* 超出文本显示省略号 */
  line-height: 1.2; /* 设置行高为 1.2 */
}


div span {
  display: -webkit-box; /* 使用 Webkit 的盒子模型 */
  -webkit-box-orient: vertical; /* 设置盒子模型的方向为垂直 */
  -webkit-line-clamp: 2; /* 限制文本显示为两行 */
  overflow: hidden; /* 隐藏超出 span 边界的内容 */
  text-overflow: ellipsis; /* 超出文本显示省略号 */
  white-space: normal; /* 允许文本换行 */
}

<div>
  <span>你的文本内容你的文本内容你的文本内容你的文本内容</span>
</div>

方法二
只用有一个div

div {
  width: 100px;
  height: 2.4em; /* 设置高度为两行的高度 */
  display: -webkit-box; /* 使用 WebKit 的盒子模型 */
  -webkit-box-orient: vertical; /* 设置盒子模型的方向为垂直 */
  -webkit-line-clamp: 2; /* 限制文本显示为两行 */
  overflow: hidden; /* 隐藏超出 div 边界的内容 */
  text-overflow: ellipsis; /* 超出文本显示省略号 */
  border: 1px solid red; /* 设置 div 的边框为红色，宽度为 1 像素 */
  text-align: center; /* 文本居中对齐 */
  white-space: normal; /* 允许文本换行 */
  line-height: 1.2; /* 设置行高为 1.2 */
}
<div>
  你的文本内容你的文本内容你的文本内容你的文本内容
</div>

Swift社区

11.8k2164

发布于
10 月 24 日上海

是的，可以通过 CSS 实现这种效果。使用 flexbox 和 text-overflow 可以达到水平、垂直居中，并且超出两行内容显示省略号的效果。

以下是具体的实现：

<div class="centered-box">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vehicula.
</div>

.centered-box {
  display: flex;
  justify-content: center;  /* 水平居中 */
  align-items: center;      /* 垂直居中 */
  width: 200px;
  height: 100px;
  text-align: center;
  padding: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 限制最多显示两行 */
  -webkit-box-orient: vertical;
  line-height: 1.5; /* 控制行间距 */
}

这个代码实现了：

文本的水平、垂直居中对齐。
最多显示两行内容，如果超出两行，则显示省略号（通过 -webkit-line-clamp）。

这种方式常用于固定尺寸的卡片或预览组件。

查看全部 3 个回答

被 1 篇内容引用

element-ui在页面中，多个触发点共用一个el-popover提示组件

推荐问题

只用一个div，宽高固定，文本内容不固定，能不能实现水平、垂直居中，超出两行显示省略号？

省市区街道数据在哪里可以下载？

Vue项目一个报错无法找到原因?

如何自定义设置虚线边框的样式？

前端有没有办法实现页面截图？

为什么这个动画一直在抖动?

css3如何实现这样的渐变背景?

怎么把一个矩形div变成一个直角三角形？