如何用CSS/HTML实现适配可变文本长度的两端半圆oblong形状span？

完全可以通过border-radius属性适配任意长度的span，实现方式非常简单：

核心实现思路 #

将border-radius设置为远大于元素最大高度的固定值（比如9999px），只要圆角数值≥元素高度的一半，元素两端就会自动呈现半圆形效果，完全不需要根据文本长度动态计算样式。

完整代码示例 #

CSS样式 #

.oblong-span {
  /* 声明为行内块，保证上下内边距生效，样式更稳定 */
  display: inline-block;
  /* 上下内边距控制标签高度，左右内边距控制两端留白 */
  padding: 4px 12px;
  /* 超大圆角值，适配任意高度和宽度 */
  border-radius: 9999px;
  /* 可选的基础样式，可按需调整 */
  background-color: #f0f0f0;
  font-size: 14px;
  line-height: 1.4;
  color: #333;
}

HTML使用 #

<span class="oblong-span">短文本</span>
<span class="oblong-span">长度不固定的长文本测试示例</span>

注意事项 #

如果不需要调整上下边距、只需要基础行内展示，也可以省略display: inline-block声明，仅保留padding和border-radius属性即可生效。

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