在网页开发中，有时我们需要对HTML长文本进行截取，特别是在显示摘要或者限制内容区域时。本文将介绍两种适用于含有HTML代码的长文本截取方法，分别是使用CSS和JavaScript（jQuery）。
我们来看第一种方法：使用CSS截断字符串。这种方法适用于大多数现代浏览器，包括IE、Firefox、Opera和Safari。CSS截断的关键在于`overflow`、`white-space`、`text-overflow`和特定浏览器的前缀属性。以下是一个简单的示例：
```css
.subLongText {
width: 150px; /* 定义容器宽度 */
height: 24px; /* 高度，根据需要设定 */
overflow: hidden; /* 隐藏超出容器的部分 */
white-space: nowrap; /* 不换行，使所有文本保持在同一行 */
text-overflow: ellipsis; /* 当文本超出容器时，显示省略号 */
-ms-text-overflow: ellipsis; /* IE的兼容性写法 */
-o-text-overflow: ellipsis; /* Opera的兼容性写法 */
-moz-binding: url("ellipsis.xml#ellipsis"); /* Firefox的兼容性写法，需要创建一个XML文件来定义规则 */
}
```
HTML结构如下：
```html
<span class="subLongText">任意长度文本</span>
```
通过这种方式，CSS可以自动处理文本截断，但不适用于复杂HTML结构，因为它无法识别和截取HTML标签内的内容。
接下来是第二种方法：使用JavaScript（jQuery）截取。这种方法更灵活，可以处理复杂的HTML结构。以下是一个基于jQuery的示例，它定义了一个自定义的`.substr()`函数，用于截取指定长度的HTML内容，并在末尾添加省略号：
```html
<!DOCTYPE html>
<html>
<head>
<title>JQUERY 文本截取方法</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
$.fn.substr = function(length, content) {
$(this).each(function(i, item) {
var val = $(item).html();
if (!val) return;
if (val.length > length) {
val = val.substring(0, length);
val += content || "..."; // 添加省略号
$(item).html(val);
}
});
}
function subTdContent() {
$('td').substr(20); // 截取td元素内文本，长度为20
}
</script>
</head>
<body onload="javascript:subTdContent();">
<table style="border:1px solid #b3c0f5;" border="1">
<tr>
<td>我是代码：$.fn.substr = function(l,c){ $(this).each(function(i,item)</td>
<td>以下两种方式都可以解决textarea行高自动适应类容的高度</td>
<td>以下两种方式都可以解决textarea行</td>
</tr>
</table>
</body>
</html>
```
在这个示例中，`subTdContent`函数会在页面加载完成后调用，截取每个`td`元素内的内容，如果内容长度超过20个字符，则进行截取并添加省略号。
总结来说，CSS方法适合简单文本截取，而JavaScript（jQuery）方法则能更好地处理包含HTML标签的复杂文本。在实际应用中，开发者应根据项目需求和目标浏览器的兼容性选择合适的方法。对于需要精确控制和复杂HTML结构的情况，JavaScript方法更具优势。
