溢出隐藏显示省略号的使用方法

在前端开发过程中我们经常需要处理文本溢出的情况，为了美观和更好的用户体验，我们可以通过省略号来隐藏超出部分的文本。在本文中，我们将详细讨论如何使用CSS和JavaScript来实现文本溢出隐藏显示省略号，包括以下几个方面：

一、从溢出文本隐藏显示省略号

当文本超出容器的宽度时，我们可以使用CSS的text-overflow属性来实现溢出隐藏并显示省略号。这个方法适用于单行文本，我们只需要将容器的宽度设置为一个固定值，然后设置overflow:hidden和text-overflow:ellipsis属性即可。

.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

这个方法特别适用于标题或者简短的一句话描述。

二、超出隐藏显示省略号

如果文本超出容器的高度或者宽度时，我们可以使用JavaScript来实现。当用户鼠标移动到元素上时，我们显示完整的文本；当鼠标移开时，我们隐藏部分文本并在末尾显示省略号。下面是一个使用JavaScript实现超出隐藏显示省略号的例子：

<div id="text">This is a long text.</div>
<script>
  let text = document.getElementById('text');
  const limit = 10;
  const suffix = '...';
  let title = text.innerHTML;
  if (title.length > limit) {
    title = title.substring(0, limit) + suffix;
    text.setAttribute('title', text.innerHTML);
  }
  text.innerHTML = title;
</script>

在这个例子中，我们将文本限制在10个字符内，如果超过限制就在末尾加上省略号。我们也可以通过添加title属性来显示完整的文本。

三、CSS溢出显示省略号

有些时候，我们需要强制将文本强制显示出来而不是被隐藏。在这种情况下，我们可以使用CSS的overflow属性并将其设置为scroll或auto。同时，我们可以使用text-overflow属性来显示省略号。下面是一个使用CSS实现溢出显示省略号的例子：

.ellipsis {
  white-space: nowrap;
  overflow: scroll;
  text-overflow: ellipsis;
}

这个样式将强制将文本显示出来，但如果超出容器大小，将自动添加滚动条。省略号将用于折叠超出容器的部分。

四、溢出显示省略号

在某些情况下，我们希望文本始终完全显示，但是也希望在某些情况下使用省略号。这个效果可以通过使用JavaScript来实现，例如在列表中的行数超出指定数量时，我们可以使用省略号。下面是一个使用JavaScript实现溢出显示省略号的例子：

<div id="text">This is a long text.</div>
<script>
  let text = document.getElementById('text');
  const limit = 2; // set limit to 2 lines
  const suffix = '<br>...'; // add line break before ellipsis
  let lines = text.innerHTML.split('\n');
  if (lines.length > limit) {
    text.innerHTML = lines.slice(0, limit).join('\n') + suffix;
    text.setAttribute('title', text.innerHTML);
  }
</script>

在这个例子中，我们将文本限制在2行内，如果超过限制就在行末添加省略号。注意，在这个例子中，我们将省略号放置在最后一行的末尾。我们还可以设置title属性来显示完整的文本。

五、多行文本溢出隐藏且不显示省略号

在某些情况下，如果文本超出容器大小，我们不希望显示省略号，也不希望添加滚动条。这时候，我们可以使用CSS的text-wrap和word-break属性，将文本强制换行并截断文本。这个解决方法适用于多行文本。下面是一个使用CSS实现多行文本溢出隐藏且不显示省略号的例子：

.truncate {
  white-space: pre-wrap;
  max-height: 80px; /*set the maximum height*/
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: break-word;
  word-break: break-all;
}

在这个例子中，我们将容器的最大高度设置为80px，并将white-space属性设置为pre-wrap。我们还将word-wrap和word-break属性设置为break-word，以防止溢出文本破坏布局。此样式不添加省略号，但可以强制文本溢出隐藏并截断文本。

六、文字溢出显示省略号

在某些情况下，我们希望只截断一段文本而不是整个容器，这时候我们可以使用CSS的display属性和JavaScript来处理。下面是一个实现文字溢出显示省略号的例子：

.truncate {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<div id="text-container">
  <div class="truncate" id="text">This is a long text.</div>
  <button onclick="showFullText()">Show All</button>
</div>

<script>
  let text = document.getElementById('text');
  const limit = 10;
  let title = text.innerHTML;
  if (title.length > limit) {
    text.innerHTML = title.substring(0, limit) + '...';
  }

  function showFullText() {
    text.innerHTML = title;
  }
</script>

在这个例子中，我们将文本在一个内联块级元素中显示，并使用white-space属性将文本限制在一行内。我们还使用overflow和text-overflow属性将溢出文本截断并显示省略号。在JavaScript中，我们为文本添加了一个showFullText()函数，以便在用户点击按钮时显示完整的文本。

七、CSS文本多行显示省略号

CSS通常只能使单行文本显示省略号。但是，有时候我们需要沿着文本的多行显示省略号而不是只显示单行。下面是一个实现CSS文本多行显示省略号的例子：

.truncate {
  display: -webkit-box;
  -webkit-line-clamp: 3; /*set number of lines*/
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

<div class="truncate">This is a long text.</div>

在这个例子中，我们将显示文本的容器添加到内联块级元素中，并使用-webkit-box属性将文本放置在一个box中，并使用-webkit-box-orient属性设置文本的方向，即垂直（需要使用Webkit内核）。 -webkit-line-clamp属性定义我们需要显示的文本的行数，溢出部分将被省略号替代。

八、单行文本溢出显示省略号

最后，有时候我们在单个容器中需要截断并显示省略号，这个情况下我们可以使用CSS属性text-overflow。这是一个简单的方法只适用于单行文本，但它非常有效，使用方便。下面是一个实现单行文本溢出显示省略号的例子：

<style>
  .truncate {
    width: 250px; /* set width */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
</style>

<div class="truncate">This is a long text.</div>

在这个例子中，我们为容器设置固定宽度，并使用white-space属性将文本限制在一行内。我们还将overflow和text-overflow属性设置为hidden和ellipsis，以将溢出文本截断并显示省略号。