如何实现CSV姓名列表中每个姓名首字母单独放大显示？

核心思路是把每个逗号分隔的姓名单独包裹成内联块元素，让CSS的:first-letter伪类能作用于每个姓名的首字母，而非整行的第一个字母。这种方法不用手动拆分首字母，代码更简洁易维护。

1. 调整CSS代码 #

/* 包裹单个姓名的容器 */
.name {
  display: inline-block;
  margin-right: 1.5em; /* 控制姓名之间的间距，可按需调整 */
}

/* 每个姓名的首字母放大样式 */
.name:first-letter {
  font-size: 150%;
  /* 可额外添加加粗、颜色等样式，比如：font-weight: bold; */
}

/* 整体段落的基础样式 */
.font {
  /* 可设置整体字体、行高等，比如：font-family: Arial, sans-serif; line-height: 1.6; */
}

2. 修改JavaScript代码 #

把原来替换逗号为空格的逻辑，改成拆分姓名并包裹成span元素：

var fontSizeInput = document.getElementById("font-size-input"); 
var fontSize = fontSizeInput.value + "pt";
// ... 其他输入逻辑保持不变

var lines = text.split('\n'); 
var container = document.getElementById('text-container');
container.innerHTML = '';

for (var i = 0; i < lines.length; i++) {
   var line = lines[i].trim();
   if (!line) continue; // 跳过空行
   var p = document.createElement('p');
            
   p.className = 'font';
   p.style.fontSize = fontSize;

   // 拆分当前行的所有姓名
   var names = line.split(',');
   names.forEach(function(name) {
     name = name.trim();
     if (name) {
       var nameSpan = document.createElement('span');
       nameSpan.className = 'name';
       nameSpan.textContent = name;
       p.appendChild(nameSpan);
     }
   });

   container.appendChild(p);
}

优势说明 #

• 无需手动拆分首字母，利用CSS原生伪类实现需求，逻辑更清晰；
• 姓名间距通过CSS的margin控制，比空格分隔更灵活，可随时调整；
• 样式和逻辑分离，后续修改首字母样式或姓名排版，只需调整CSS即可。

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