js文字超出显示省略号

基础概念

在JavaScript中，当文本内容超出其容器的显示宽度时，可以通过CSS样式来实现省略号显示。这通常涉及到设置容器的宽度、溢出行为以及文本的显示方式。

类型与应用场景

单行文本省略：适用于标签、标题等短文本。
多行文本省略：适用于摘要、描述等较长文本。

示例代码

单行文本省略

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  .ellipsis {
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
</style>
</head>
<body>
<div class="ellipsis">这是一段很长的文本，超出部分将会显示为省略号。</div>
</body>
</html>

多行文本省略

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  .multi-line-ellipsis {
    width: 200px;
    height: 60px; /* 设置固定高度 */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; /* 显示的行数 */
    overflow: hidden;
    text-overflow: ellipsis;
  }
</style>
</head>
<body>
<div class="multi-line-ellipsis">
  这是一段很长的文本，超出部分将会显示为省略号。我们希望只显示前三行，其余部分用省略号代替。
</div>
</body>
</html>

遇到问题及解决方法

问题：文本没有正确显示省略号

原因：

容器宽度未设置或设置不当。
white-space属性未设置为nowrap（单行文本）。
-webkit-line-clamp值设置不正确（多行文本）。

解决方法：

确保容器有明确的宽度。
对于单行文本，使用white-space: nowrap; overflow: hidden; text-overflow: ellipsis;。
对于多行文本，使用display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: n; overflow: hidden; text-overflow: ellipsis;，其中n是你希望显示的行数。

通过以上方法，可以有效解决JavaScript中文字超出显示省略号的问题。

页面内容是否对你有帮助？

有帮助

没帮助