单/多行文本添加省略号方法详解

单行文本添加省略号

如果你需要在页面中显示一段过长的单行文本，而空间有限，这时你可以使用省略号来代替部分文字，使得整个文本能够正常显示。在Markdown中，我们可以通过以下两种方法实现单行文本添加省略号。

使用CSS

通过以下代码，我们可以使用CSS的text-overflow属性来为单行文本添加省略号。

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

其中，text-overflow属性用于指定当文本溢出时，显示省略号；overflow属性用于指定当内容溢出框时，是否截断内容或显示滚动条；white-space属性用于指定如何处理文本中的空白符。

那么我们可以在Markdown的<style>标签中添加以上代码，然后在需要添加省略号的文本中，使用<span>标签，并为其添加.ellipsisclass，实现省略号的效果。示例如下：

<style>
.ellipsis {
  text-overflow:ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
</style>

这是一段超长的文本<span class="ellipsis">这是需要替换为省略号的部分</span>，在页面上使用省略号能够提高排版美观度。

使用JavaScript

使用JavaScript来实现单行文本的添加省略号，通过获取文字的实际宽度及容器宽度，判断文字是否溢出，如果溢出则截断并添加省略号。示例如下：

<div style="width: 100px; border: 1px solid black;">
  <p id="ellipsis">这是一段超长的文本，使用省略号能够提高排版美观度。</p>
</div>

<script type="text/javascript">
  function text_ellipsis(id) {
    var text = document.getElementById(id);
    var container = text.parentNode;

    container.style.overflow = "hidden";
    container.style.textOverflow = "ellipsis";
    container.style.whiteSpace = "nowrap";

    var iterations = 10;
    var min = 0;
    var max = text.clientWidth;
    var guess;

    while (iterations--) {
        guess = Math.floor((min + max) / 2);
        text.style.width = guess + "px";
        if (container.clientWidth < text.scrollWidth) {
            max = guess;
        } else {
            min = guess;
        }
    }

    text.style.width = max + "px";
  }

  text_ellipsis('ellipsis');
</script>

在上述代码中，我们首先定义一个容器，容器的宽度为 100px，文本内容超过了该宽度。然后使用 JavaScript text_ellipsis 函数，该函数传入一个参数为 id，在 text_ellipsis 内部使用了二分法来判断在容器中能显示的最大文字宽度，然后将实际的最大宽度赋值给 text 元素的 width 属性。

在以上两种方法中，使用CSS方法实现相对简单，但需要较强的CSS功底；JavaScript的方法需要添加更多的代码，并需要对页面中元素的ID进行管理，但更灵活易控制。选用哪种方法，需要根据自己的需要来进行考虑。