如何让div的textContent适配内区域并兼容overflow:hidden与左右内边距

你的核心需求是让文本在设置了padding: 0 10px和overflow: hidden的div内部区域正确适配并截断，原方案效果不佳的原因在于未处理盒模型的宽度计算，且缺少直观的截断提示。可以通过以下调整实现需求：

优化后的代码实现 #

CSS #

.my-div {
  border: 1px solid black;
  width: 150px;
  height: 20px;
  white-space: nowrap;
  overflow: hidden;
  padding: 0 10px;
  /* 新增关键属性 */
  box-sizing: border-box;
  text-overflow: ellipsis;
}

HTML #

<div class="my-div">some really long text line goes inside this fixed-width element</div>

关键属性说明 #

• box-sizing: border-box：将元素的内边距和边框纳入宽度计算范围，确保设置的width: 150px是元素的总宽度，文本只会在padding限定的内部区域显示，不会超出容器的可视范围。
• text-overflow: ellipsis：当文本长度超过容器可用宽度时，在文本末尾显示省略号，清晰提示用户内容已被截断。
• white-space: nowrap + overflow: hidden：组合使用确保文本始终保持单行，超出部分直接隐藏。

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