html - 如何响应式缩进元素

Question

我有一些文本想缩进一定量，比方说 20px。 但是，文本的长度是动态的。如果文字宽度小于屏幕宽度，但文字+20px大于屏幕宽度，我不希望文字转到下一行。相反，我想减少缩进。

这些是我想适应的情况:

短文本:

|      Lorem ipsum                 |

Text screen-width:

|   Lorem ipsum dolors amet|

文本 = 屏幕宽度:

|Lorem ipsum dolor sit amet|

文字>屏幕宽度:

|Lorem ipsum dolor sit amet|
|consectetuer adipiscing.    |

我知道这有点傻，而且真的没那么重要。但令我沮丧的是，我不知道该怎么做。

Answer 1

这是一个纯 CSS 解决方案...适用于支持 calc 的浏览器。

<div class="indent">
    <span>Lorem ipsum dolor sit amet consectetuer adipiscing.</span>
</div>
.indent {background:pink;}
.indent span {float:right; min-width:calc(100% - 20px);}
.indent:after {content:""; display:table; clear:both;}

fiddle :http://jsfiddle.net/anwPa/