如何在Razor页面中用动态字符串填充div/段落宽度（无换行溢出）

嘿，这个需求我刚好折腾过类似的，给你分享一套在Razor页面里能完美实现的方案，分HTML结构、CSS样式和JS逻辑三部分，完全满足你固定容器、头尾内容+中间重复填充、不换行不溢出的要求：

1. Razor页面的HTML结构 #

先把容器和占位元素写好，既可以用data-*属性存动态内容，也能直接绑定Razor后端变量，灵活度拉满：

@{
    // 这里用后端变量动态赋值，适配不同场景的内容需求
    var startContent = "I love cookies";
    var endContent = "much";
    var fillString = "very";
}

<div class="fixed-fill-box" 
     data-start="@startContent" 
     data-end="@endContent" 
     data-fill="@fillString">
    <span class="content-start"></span>
    <span class="content-fill"></span>
    <span class="content-end"></span>
</div>

2. CSS样式（固定容器+排版控制） #

核心是锁定容器宽高、禁止换行，同时保证头尾内容不被压缩，中间填充区域自动占满剩余空间：

.fixed-fill-box {
    width: 400px; /* 你的固定宽度，可按需调整 */
    height: 36px; /* 固定高度，可按需调整 */
    white-space: nowrap;
    overflow: hidden;
    display: flex;
    align-items: center;
    border: 1px solid #eee; /* 可选，方便调试时看清容器范围 */
}

.content-start, .content-end {
    flex-shrink: 0; /* 关键：不让头尾内容被挤压变形 */
    margin: 0 6px; /* 可选：给填充内容留点间距，视觉更美观 */
}

.content-fill {
    flex-grow: 1; /* 强制占满容器剩余空间 */
    overflow: hidden; /* 自动截断超出的填充内容 */
}

3. JS逻辑（计算填充次数+动态生成内容） #

就是你提到的js_magic()函数，核心是精准计算容器剩余宽度，生成足够多的填充字符串后再截断到刚好填满：

function js_magic() {
    // 批量处理所有需要填充的容器
    const fillBoxes = document.querySelectorAll('.fixed-fill-box');
    
    fillBoxes.forEach(box => {
        // 从data属性中取出预先设置的内容
        const startText = box.dataset.start;
        const endText = box.dataset.end;
        const fillText = box.dataset.fill;
        
        // 获取对应的元素节点
        const startEl = box.querySelector('.content-start');
        const endEl = box.querySelector('.content-end');
        const fillEl = box.querySelector('.content-fill');
        
        // 先渲染头尾内容
        startEl.textContent = startText;
        endEl.textContent = endText;
        
        // 计算容器剩余可用宽度
        const totalWidth = box.offsetWidth;
        const startWidth = startEl.offsetWidth;
        const endWidth = endEl.offsetWidth;
        // 减去头尾宽度和预留的间距总和（这里的12是两个margin的总和：6*2），可根据你的CSS调整
        const availableWidth = totalWidth - startWidth - endWidth - 12;
        
        // 用临时元素计算单个填充字符串的真实宽度（确保样式和实际填充元素一致）
        const tempSpan = document.createElement('span');
        tempSpan.textContent = fillText;
        tempSpan.style.font = window.getComputedStyle(fillEl).font;
        document.body.appendChild(tempSpan);
        const singleFillWidth = tempSpan.offsetWidth;
        document.body.removeChild(tempSpan);
        
        // 避免填充字符串为空导致的计算错误
        if (singleFillWidth <= 0) return;
        
        // 生成足够多的填充字符串（多生成3个确保能填满容器）
        let filledContent = fillText.repeat(Math.floor(availableWidth / singleFillWidth) + 3);
        
        // 精确截断到刚好匹配剩余空间
        fillEl.textContent = filledContent;
        while (fillEl.offsetWidth > availableWidth) {
            filledContent = filledContent.slice(0, -fillText.length);
            fillEl.textContent = filledContent;
        }
    });
}

// 页面加载完成后执行，窗口大小变化时重新计算（避免布局错位）
window.addEventListener('load', js_magic);
window.addEventListener('resize', js_magic);

• 如果填充字符串带有特殊样式（比如自定义字体、颜色），一定要确保临时元素的样式和.content-fill完全一致，否则宽度计算会出现偏差
• 要是不需要响应窗口大小变化，可以去掉resize事件监听
• 还可以把这套逻辑封装成Razor视图组件，方便在多个页面复用

内容的提问来源于stack exchange，提问作者Guy Dresher