如何创建宽度随内部文本弹性调整的矩形（替代文本换行行为）

下面分两种常用场景给出具体实现方法：

Web前端（HTML+CSS） #

要让矩形宽度随文本内容弹性调整且不换行，核心是让容器宽度由内容撑开，同时强制文本保持一行显示：

1. 基础代码示例：

<div class="auto-width-box">这是随文本宽度变化的矩形</div>

.auto-width-box {
  display: inline-block; /* 让容器宽度贴合文本内容 */
  background-color: #f0f0f0;
  padding: 6px 10px; /* 给文本添加内边距，形成矩形区域 */
  border-radius: 3px;
  white-space: nowrap; /* 禁止文本换行 */
}

2. 进阶调整：

• 如果在flex布局环境中使用，可将容器的display设为inline-flex，效果一致；
• 若文本过长需要限制最大宽度并显示省略号，可额外添加：

max-width: 200px;
overflow: hidden;
text-overflow: ellipsis;

设计工具（以Figma为例） #

1. 插入文本框并输入目标内容；
2. 选中文本框，在右侧属性面板设置「填充」（Padding），按需调整数值，让文本周围形成矩形区域；
3. 在宽度设置项中选择「自动」，同时将文本的「换行」选项设为「不换行」；
4. 此时矩形区域会自动匹配文本宽度，修改文本内容时宽度会同步变化。

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