Html长文本超出标记宽度后自动截取实现代码

在处理长文本时，特别是在包含HTML标记的情况下，简单的字符截取并不是一个好的解决方案。在C端进行这样的操作往往容易出现乱码问题，因为HTML标签可能会被不正确地截断。为了优雅地处理这种情况，我们可以借助CSS的特性来实现。

使用CSS的`span`标签是一个很好的开始。当内容超出预定范围时，我们可以利用CSS属性来强制文本不换行并自动换行。以下是相关代码示例：

```css

span {

white-space: nowrap; / 不换行 /

display: inline-block; / 作为行内块元素显示 /

}

```

若想让超出部分自动隐藏，同时保持文本不断行的显示，可以添加以下样式：

```css

div { / 必须在块元素内 /

overflow: hidden; / 超出部分隐藏 /

white-space: nowrap; / 不换行 /

}

```

更进一步，如果你希望在文字后面加上省略号（...）来表示文本已被截断，可以使用`text-overflow`属性。这个属性在现代主流浏览器中都有很好的支持。以下是相关代码示例：

```css

.tbcon {

float: left;

width: 255px;

padding: 5px 10px;

}

.tbcon li, .tbcon span {

padding-left: 7px;

text-overflow: ellipsis; / 超出部分显示省略号 /

overflow: hidden; / 超出部分隐藏 /

display: block; / 块级元素 /

white-space: nowrap; / 不换行 /

width: 240px; / 定义宽度 /

}

```