富文本内容的“显示更多/更少”展开收起功能实现求助

我完全懂你现在的困扰！之前用普通文本写的展开收起逻辑，碰到富文本就失效了——要么把HTML标签的字符也算进长度里，导致判断不准，要么直接截断到HTML标签中间，把页面结构搞乱，对吧？

咱们可以从两个核心问题入手解决：准确统计富文本的纯文本长度，以及不破坏HTML结构的内容折叠，给你两种可行的方案：

方案一：CSS高度限制法（简单可靠，推荐） #

这种方法不用截断富文本，而是通过CSS控制容器高度隐藏超出内容，展开时取消限制，既不会破坏HTML结构，也能准确判断是否需要显示按钮：

1. 先在ASCX里判断是否需要显示切换按钮 #

我们需要先把富文本里的HTML标签去掉，统计纯文本的长度，再决定要不要显示“显示更多”按钮：

<% 
// 获取解码后的富文本内容
var desc = HttpUtility.HtmlDecode(dt_Facilities.Rows[0][FacilitySubCategoryList.Description].ToString());

// 辅助方法：去掉HTML标签，提取纯文本
string StripHtml(string html) {
    return System.Text.RegularExpressions.Regex.Replace(html, "<.*?>", string.Empty);
}

var plainTextContent = StripHtml(desc);
int characterLimit = 200; // 你设定的阈值
bool needToggle = plainTextContent.Length > characterLimit;
%>

2. 调整HTML和CSS结构 #

<div id="module" class="container">
    <div class="collapse-content collapse<%= needToggle ? "" : " show" %>" id="collapseExample">
        <%= desc %>
    </div>
    <% if (needToggle) { %>
        <a role="button" class="collapse-toggle collapsed" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample"></a>
    <% } %>
</div>

<style>
/* 默认状态：限制高度，隐藏超出内容 */
#module .collapse-content.collapse:not(.show) {
    max-height: 120px; /* 可根据200字符的显示高度微调，比如行高1.5的话，大概8行左右 */
    overflow: hidden;
    display: block;
}
/* 展开状态：取消高度限制 */
#module .collapse-content.collapse.show {
    max-height: none;
}
/* 修复Bootstrap collapsing的过渡问题 */
#module .collapse-content.collapsing {
    height: auto;
}
/* 切换按钮的文字切换 */
#module a.collapsed::after {
    content: '+ Show More';
}
#module a:not(.collapsed)::after {
    content: '- Show Less';
}
/* 按钮样式优化（可选） */
#module .collapse-toggle {
    display: inline-block;
    margin-top: 10px;
    color: #007bff;
    text-decoration: underline;
    cursor: pointer;
}
</style>

方案二：精确截断富文本（复杂但精准） #

如果一定要精确显示200字符的纯文本+省略号，同时保留HTML结构，就需要解析HTML节点，逐个统计纯文本字符，避免截断到标签中间。这里给你一个简化的C#辅助方法示例：

private string TruncateRichText(string html, int maxLength)
{
    var doc = new HtmlAgilityPack.HtmlDocument();
    doc.LoadHtml(html);
    var textLength = 0;
    var result = new StringBuilder();

    // 递归遍历HTML节点，统计纯文本长度
    void TraverseNodes(HtmlNode node)
    {
        if (textLength >= maxLength) return;

        if (node.NodeType == HtmlNodeType.Text)
        {
            var text = node.InnerText.Trim();
            if (!string.IsNullOrEmpty(text))
            {
                var remaining = maxLength - textLength;
                if (text.Length > remaining)
                {
                    result.Append(text.Substring(0, remaining) + "...");
                    textLength = maxLength;
                }
                else
                {
                    result.Append(text);
                    textLength += text.Length;
                }
            }
        }
        else if (node.NodeType == HtmlNodeType.Element)
        {
            result.Append(node.OuterHtml.Substring(0, node.OuterHtml.IndexOf('>') + 1));
            foreach (var child in node.ChildNodes)
            {
                TraverseNodes(child);
                if (textLength >= maxLength) break;
            }
            // 闭合标签（简单处理，复杂标签可能需要调整）
            if (textLength < maxLength)
            {
                result.Append($"</{node.Name}>");
            }
        }
    }

    TraverseNodes(doc.DocumentNode);
    return result.ToString();
}

使用时在ASCX里调用这个方法，生成截断后的富文本，再结合原来的折叠逻辑即可。不过这个方法需要引入HtmlAgilityPack包，适合对截断精度要求很高的场景。

最后提醒一下：确保你的页面已经正确引入了Bootstrap的CSS和JS，以及jQuery（因为data-toggle="collapse"依赖这些库）。

内容来源于stack exchange