HTML+CSS+JS计算器开发：p标签内容过长不换行溢出问题求助

解决方案 #

直接修改你代码中.result p的CSS规则，新增换行相关属性即可解决溢出问题，修改后的完整规则如下：

.result p {
  height: 100%;
  width: 100%;
  padding: 10px;
  margin: 0;
  box-sizing: border-box;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: pre-wrap;
}

属性说明 #

• box-sizing: border-box：避免padding将p标签的实际宽度撑得超出父容器，保证width:100%是包含内边距的总宽度
• word-wrap: break-word + overflow-wrap: break-word：强制拆分无空格的连续数字/字符，在到达容器边界时主动换行
• white-space: pre-wrap：保留输入内容中的空格，同时支持自动换行
• 额外的margin:0是为了清除p标签的默认外边距，避免出现不必要的布局偏移

如果需要限制结果区域最多显示行数，避免内容过多撑高容器，可以新增以下属性：

.result p {
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 可自定义最多显示行数 */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

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