HTML 在

div>标签内截断过长文本

在本文中，我们将介绍如何在HTML的

div>标签内截断过长的文本。当文本内容超过

div>容器的宽度时，经常需要进行截断以保持页面布局的美观性。我们将探讨几种常见的方法来实现这个目标，并提供示例来说明每种方法的效果。

阅读更多：HTML 教程

1. 使用CSS的text-overflow属性

CSS的text-overflow属性可以用于处理超出容器宽度的文本。该属性有三个可能的值：

clip：默认值，隐藏超出容器的文本，不显示省略号或其他指示符。
ellipsis：显示文本的末尾省略号以指示被截断的部分。
fade：在文本溢出端点时将渐变应用于文本。

以下是一个示例，将text-overflow属性应用于

div>标签内的文本：

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

<div class="container">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eu laoreet est.
</div>

在上面的示例中，我们使用text-overflow: ellipsis来截断超出容器宽度的文本，并显示末尾的省略号。

2. 使用JavaScript截断文本

除了使用CSS，我们还可以使用JavaScript来截断过长的文本内容。通过在

div>标签内的文本中插入脚本，我们可以检查文本的长度并截断它。

以下是一个使用JavaScript截断文本的示例：

<script>
    function truncateText() {
        var container = document.getElementById("container");
        if (container.textContent.length > 20) {
            container.textContent = container.textContent.slice(0, 20) + "...";
        }
    }
    window.onload = truncateText;
</script>

<div id="container">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eu laoreet est.
</div>

上面的例子中，我们使用JavaScript的slice()方法来截断超过20个字符的文本，并添加省略号。

3. 使用CSS的word-wrap属性

在一些特殊情况下，文本可能包含没有空格或连字符的长单词，这可能导致无法正确截断。这时可以使用CSS的word-wrap属性来处理这种情况。word-wrap属性有两个可能的值：

normal：默认值，不允许长单词折行。
break-word：允许长单词折行。

以下是一个使用word-wrap属性截断文本的示例：

<style>
    .container {
        width: 200px;
        overflow: hidden;
        word-wrap: break-word;
    }
</style>

<div class="container">
    Supercalifragilisticexpialidocious
</div>

在上述示例中，我们使用word-wrap: break-word将长单词断行，以适应容器的宽度。