我有一些文本想要缩进一定量,比如说 20px。但是,文本的长度是动态的。如果文本的宽度小于屏幕宽度,但文本+20px大于屏幕宽度,我不希望文本转到下一行。相反,我想减少缩进。
这些是我想容纳的情况:
短文:
| 洛雷姆 伊普苏姆 |
文本<屏幕宽度,但文本+20px>屏幕宽度:
| Lorem ipsum dolors 艾美特|
文本 = 屏幕宽度:
|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 规则。http://css-tricks.com/snippets/css/media-queries-for-standard-devices/