如何改变元素宽度收缩方向？以h1元素背景位置调整为例

要让粉色背景出现在靠近"o"的一侧，你可以试试以下两种方法：

方法一：文本右对齐 #

通过text-align: right让文本靠元素右侧排列，配合overflow: hidden隐藏溢出内容，就能让背景覆盖文本末尾区域：

<h1 style="background-color: pink; width: 10px; text-align: right; overflow: hidden;">hello</h1>

方法二：调整文本流向 #

使用direction: rtl改变元素内的文本排版方向（英文单词顺序不受影响），同样搭配overflow: hidden：

<h1 style="background-color: pink; width: 10px; direction: rtl; overflow: hidden;">hello</h1>

为什么之前的方法无效： #

• float: right是让元素整体靠右，而非调整内部文本对齐，缩小宽度时元素会贴到屏幕右侧，不符合需求；
• CSS不允许宽度为负值，所以设置负宽度不会生效。

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