Question

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

这些是我想要容纳的案例：

简短文字：

| LOREM 存有|

文字＆lt;屏幕宽度，但文字+ 20px＆gt;屏幕宽度：

| Lorem ipsum dolors 阿梅特|

Text = screen-width：

| Lorem ipsum dolor sit amet |

文字＆gt;屏幕宽度：

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

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

Answer 2

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

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

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

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

Answer 3

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

如何响应缩进元素

3 个答案: