React通过props传递的notes内容不自动换行溢出容器如何解决？

你测试用的第一条notes数据是无任何空格的连续长字符串，浏览器默认不会对无空格的超长文本自动断行，因此会出现溢出。手动输入的文本通常带有自然空格，符合默认换行规则，所以可以正常换行。

方案1：使用Bootstrap自带工具类（推荐） #

Bootstrap 内置了 text-break 断行工具类，直接在渲染notes的列元素上添加该类即可，修改InvoiceItem组件对应代码：

<div className="col-8 margin__adjust text-break">{props.addnotes}</div>

方案2：自定义CSS实现 #

如果需要自定义断行规则，可以在InvoiceItem.css文件中添加如下样式：

/* 针对notes容器添加断行规则 */
.margin__adjust {
  /* 允许长单词换行到下一行 */
  word-wrap: break-word;
  /* 标准断行属性，兼容所有现代浏览器 */
  overflow-wrap: break-word;
  /* 可选：如果需要强制所有字符位置都可断行，可额外添加下面的属性 */
  /* word-break: break-all; */
  /* 可选：如果需要保留notes里用户输入的原始换行符，可添加 */
  /* white-space: pre-line; */
}

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