CSS文本换行异常：行尾多余空白，边框无法紧密包裹文本

问题根源 #

你的div内每行文本末尾本身存在大量连续空格，white-space: normal仅会合并同一行内开头或中间的连续空格，但行尾的这些空格会被保留并占据额外宽度，导致边框无法紧密包裹有效文本内容。

解决方法 #

• 清理文本内容（最优方案）：直接删除文本里每行末尾的多余空格，从根源解决问题。
• 调整CSS的white-space属性：将white-space: normal替换为white-space: pre-line，该属性会合并所有连续空格（包括行尾的），同时保留文本原本的换行结构，让边框紧密贴合有效文本：

.myClass { 
  padding: 0; 
  max-width: 368px; 
  white-space: pre-line; 
  border: 1px solid black; 
}

• 若无需保留原文本的换行结构，也可以使用以下组合，让文本自动适配容器宽度换行，同时消除多余空格的影响：

.myClass { 
  padding: 0; 
  max-width: 368px; 
  white-space: nowrap;
  overflow-wrap: break-word;
  border: 1px solid black; 
}

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