html中把多余文字转化为省略号的实现方法方法

沃梦达教程前端开发

2024-02-24 14

实现方法：

实现方法：

在CSS中使用text-overflow:ellipsis; 属性可以把多余的文字自动转化为省略号。需要注意的是，为了使该属性生效，需要同时设置overflow:hidden;和white-space:nowrap;属性。

示例1：

<p class="ellipsis">这是一段非常非常长的文字，它可能显示不完</p>

.ellipsis{
  white-space:nowrap; /*禁止换行*/
  overflow:hidden; /*超出部分隐藏*/
  text-overflow:ellipsis; /*多余文字转换为省略号*/
  width: 200px; /*手动设置宽度*/
}

在这个例子中，我们手动设置了p元素的宽度为200px，并同时设置了CSS样式，使得多余的文字被转化为省略号。

示例2：

<div class="ellipsis">
  <img src="image.jpg" alt="图片">
  <p>这是一张图片描述文字，可能很长，但不能超出宽度</p>
</div>

.ellipsis{
  white-space:nowrap; /*禁止换行*/
  overflow:hidden; /*超出部分隐藏*/
  text-overflow:ellipsis; /*多余文字转换为省略号*/
  width: 300px; /*手动设置宽度*/
}
.ellipsis p{
  display:inline-block; /*防止p标签换行*/
  max-width: 200px; /*设置p标签的最大宽度*/
}
.ellipsis img{
  height: 100px; /*设置图片的显示高度*/
  margin-right: 10px; /*为了美观，设置图片右侧间隔*/
}

在这个例子中，我们使用了HTML标签嵌套的方法，在一个div元素中显示了图片和描述文字，并使用了CSS样式对其进行布局和样式。需要注意的是，为了使文字不被图片挤出去，我们使用了max-width属性限制了p元素的宽度，并设置了display:inline-block;样式使其可以和图片并排显示。