在前端开发中，文件夹路径或文件内容常常是非常长的字符串，如果全部展示在页面上会造成布局混乱和阅读困难。为了实现更好的用户体验，我们可以通过多种方式来对长字符串内容进行显示与隐藏控制。
使用CSS配合按钮切换
一种常见思路是用CSS将容器限制为固定行数，超出部分隐藏，再通过按钮切换类名来控制展开与收起。
<div id="box" class="fold">
C:UsersdefaultDocumentsProjectsfrontendsrccomponentscommonutilsformatString.js
</div>
<button id="toggle">展开</button>
<style>
.fold {
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
.expand {
display: block;
white-space: pre-wrap;
word-break: break-all;
}
</style>
<script>
var box = document.getElementById('box');
var btn = document.getElementById('toggle');
btn.onclick = function () {
if (box.classList.contains('fold')) {
box.classList.remove('fold');
box.classList.add('expand');
btn.textContent = '收起';
} else {
box.classList.add('fold');
box.classList.remove('expand');
btn.textContent = '展开';
}
};
</script>使用JavaScript截断字符串
如果不想依赖CSS行数限制，也可以用JS直接截断字符串，点击后再显示完整内容。
function renderPath(path, maxLen) {
var isLong = path.length > maxLen;
var showText = isLong ? path.slice(0, maxLen) + '...' : path;
var container = document.createElement('span');
container.textContent = showText;
if (isLong) {
var btn = document.createElement('a');
btn.href = 'javascript:void(0)';
btn.textContent = '查看全部';
btn.onclick = function () {
container.textContent = path;
btn.remove();
};
container.appendChild(btn);
}
return container;
}
// 使用示例
var longPath = '/home/user/project/src/views/detail/components/table/list/item/index.vue';
document.body.appendChild(renderPath(longPath, 20));使用details和summary原生标签
HTML5提供的<details>与<summary>标签可以不用写JS就实现折叠效果，适合简单场景。
<details> <summary>点击查看完整文件夹路径</summary> D:workspacewebapppublicstaticimagesiconssvgarrow_right_small.svg </details>
方法对比
| 方式 | 是否需要JS | 适用场景 |
|---|---|---|
| CSS加按钮 | 需要 | 需精确控制行数和样式 |
| JS截断 | 需要 | 字符串长度不固定且需交互 |
| details标签 | 不需要 | 简单原生折叠需求 |
在实际项目中，可以根据兼容性和交互复杂度选择合适方案，核心目标都是让长字符串既不影响布局，也能在用户需要时方便查看。