0

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

这些是我想适应的情况：

短文：

| Lorem ipsum |

文本 < 屏幕宽度，但 text+20px > 屏幕宽度：

| Lorem ipsum dolors amet|

文本 = 屏幕宽度：

|Lorem ipsum dolor sit amet|

文本 > 屏幕宽度：

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

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

4

3 回答 3

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;}

小提琴：http: //jsfiddle.net/anwPa/

于 2013-10-22T19:21:15.153 回答
0

使用 CSS 媒体查询根据用户设备的宽度设置特定的 CSS 规则。 http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

于 2013-10-22T19:22:25.627 回答
0

http://jsfiddle.net/qm92C/1/

在这个例子中，我使用了一个小 jQuery 来测试每个段落元素对屏幕的宽度 - 20px。如果满足该条件，则删除文本缩进。否则，它保持不变。

$(function(){
    $("p").each(function(){
        if ($(this).width() > ($(window).width() - 20)){
            $(this).css("text-indent",0);
        };
    });
});

唯一的缺点是为了测试段落的宽度，我不得不将它们更改为行内块级元素，而不是块级元素。

于 2013-10-22T19:16:00.867 回答