如何让CSS/React中带圆角边框的容器内的文字沿内边缘自动换行？

要实现文字沿容器圆角边缘自动换行，可使用CSS Shapes布局规范的shape-outside属性实现，该属性可自定义浮动元素的绕排区域形状，让文本自动贴合非矩形边界排布，完全匹配需求。

修改后的CSS代码 #

只需要在原有样式基础上新增以下规则即可：

.appContainer {
  height: 200px;
  width: 400px;
  border-radius: 20px 20px 0 0;
  background-color: blue;
  color: #fff;
  /* 新增属性 */
  box-sizing: border-box;
  padding: 0 20px;
}
/* 新增左右浮动伪元素定义绕排形状 */
.appContainer::before,
.appContainer::after {
  content: "";
  width: 20px;
  height: 100%;
}
.appContainer::before {
  float: left;
  shape-outside: inset(0 0 0 0 round 20px 0 0 0);
}
.appContainer::after {
  float: right;
  shape-outside: inset(0 0 0 0 round 0 20px 0 0);
}

原理解释 #

• 左右两个伪元素分别浮动在容器两侧，宽度和容器圆角半径一致
• inset()函数定义了和容器圆角完全匹配的形状，文字会自动沿着形状边缘换行，不需要单向固定padding也不会出现文字溢出圆角区域的问题
• 如果是全圆角/圆形容器，只需要把shape-outside的参数替换为circle(50% at left center)（左侧）和circle(50% at right center)（右侧）即可实现沿圆形边缘绕排的效果
• 该属性兼容所有主流现代浏览器，无特殊兼容需求可直接使用

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