Question

如果某些文本适合单行，是否可以水平居中对齐，但如果它占用多行（优选但不一定没有javascript），则不要进行居中对齐并执行white-space: normal？

Answer 1

这是一个HTML + CSS解决方案。

技巧是：

内的具有display: inline-box;属性，因此会缩小到其内容的大小。
有text-align: center，因此如果的尺寸小于宽度，  将居中。
有text-align: left，因此文字实际上会左对齐。

<!DOCTYPE html> <html>
    <head>
        <title>Center</title>
        <style type="text/css">
            .big-box {
                text-align: center;
                width: 40em;
                border: 1px solid red;
            }
            .center-if-single-line {
                text-align: left;
                display: inline-block;
                border: 1px solid blue;
            }
        </style>
    </head>
    <body>
        <div>
            <h1>Small</h1>
            <p class="big-box">
                <span class="center-if-single-line">
                    All your line are belong to us!
                </span>
            </p>
            <h1>Big</h1>
            <p class="big-box">
                <span class="center-if-single-line">
                    All your line are belong to us!
                    All your line are belong to us!
                    All your line are belong to us!
                    All your line are belong to us!
                    All your line are belong to us!
                    All your line are belong to us!
                    All your line are belong to us!
                    All your line are belong to us!
                    All your line are belong to us!
                    All your line are belong to us!
                    All your line are belong to us!
                    All your line are belong to us!
                    All your line are belong to us!
                    All your line are belong to us!
                    All your line are belong to us!
                </span>
            </p>
        </div>
    </body>
</html>

Answer 2

Javascript解决方案 - 不一定是最好的 - 将询问div / p的高度并从那里做出决定。如果只有一行，您需要知道DOM元素的高度。如果高度超过这个值，你做一件事;如果没有，你做另一个。您将CSS设置为更常见的默认情况，并且仅在少数情况下更改它。

例如：

var tag = document.getElementById("id_here");

if(tag.offsetHeight > 18){
   tag.style.textAlign = "left";
   tag.style.whiteSpace = "normal";}

你也可以使用jQuery。请注意，offsetHeight包含填充。

但你真的不想要一个Javascript解决方案。我不禁想你在CSS中如何做到这一点，请注意，因为它涉及动态样式。我认为这是不可能的。

如果是单行，则居中，但如果是多行，则不居中

2 个答案: