如何响应地缩进元素
我有一些文本我想缩进一定的数量，比方说20px。 但是，文本的长度是动态的。 如果文本的宽度小于屏幕宽度，但text + 20px大于屏幕宽度，我不希望文本进入下一行。 相反，我想减少缩进。
这些是我想要适应的情况：
短文本：
| Lorem ipsum |
文字<屏幕宽度，但文本+ 20px>屏幕宽度：
| Lorem ipsum dolors amet |
文本=屏幕宽度：
| Lorem ipsum dolor sit amet |
文本>屏幕宽度：
| Lorem ipsum dolor sit amet |
| consectetuer adipiscing。 |
我知道这有点傻，它并不重要。 但令我沮丧的是，我无法弄清楚如何去做。
这是一个纯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;}
小提琴：http://jsfiddle.net/anwPa/
http://jsfiddle.net/qm92C/1/
在这个例子中，我使用了一个小jQuery来测试每个段落元素的宽度 - 20px。 如果符合该条件，则删除文本缩进。 否则，它保持不变。
$(function(){
$("p").each(function(){
if ($(this).width() > ($(window).width() - 20)){
$(this).css("text-indent",0);
};
});
});
唯一的缺点是，为了测试段落的宽度，我不得不将它们更改为内嵌块级元素，而不是块级元素。
使用CSS媒体查询根据用户设备的宽度设置特定的CSS规则。 http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
链接地址: http://www.djcxy.com/p/75539.html