文本标记border-radius换行失效问题求助

你的问题出在<span>是行内元素，当文本换行时，每一行都会生成独立的行内渲染框，border-radius会作用在每一行的两端，导致中间出现直角。

用box-decoration-break: clone属性就能解决这个问题，它会让行内元素的背景、圆角等装饰在换行时按整体元素的样式统一渲染，只在整个文本块的首尾保留圆角，中间换行处不会出现多余的圆角或直角。

修改后的CSS代码：

p span {
  padding: 7px;
  line-height: 35px;
  background-color: green;
  color: #ffffff;
  border-radius: 50px;
  /* 核心属性，兼容主流浏览器 */
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

这个属性的作用是将元素的装饰（背景、边框、圆角等）在换行、分页或断列时，复制到每个片段上，从而保持视觉上的连续性。

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