标签高度随着值中的空格而增加

Question

我们在项目中使用 Vaadin 6.8.9。我们正在创建垂直布局的弹出窗口，添加几个标签和按钮。

奇怪的是，当标签的值包含空格（空格、连字符等）时，它会通过在文本下方添加空格来增加其高度。对于每个空格，它看起来就像在末尾添加了一个空行。对于连字符，它更少 - 可能是行的一半。可以这么说 a a a a a a a a 消息在屏幕上占用大量空白空间（标签越多，情况越差）。

创建窗口没有魔法。我们只需创建新窗口并将其宽度设置为 600 像素。我们没有为窗口设置任何其他属性，也没有为标签设置任何其他属性。我无法在新的测试 Vaadin 项目上重现它，所以我猜问题一定出在我们的应用程序上，但我无法确定它。

以下是为此类标签生成的示例代码：

<div style="height: 180px; width: 54px; overflow: hidden;
    padding-left: 0px; padding-top: 0px;">
    <div style="float: left; margin-left: 0px;">
        <div class="v-label" style="width: 108px;">
            a a a a a a a a a a
        </div>
    </div>
</div>

如果标签值只有一行，为什么第一个 DIV 高 180 像素？高度计算机制位于何处，是否可以使用 Vaadin API 进行更改？

---

编辑： 这是根据要求的弹出窗口代码，但我很确定问题不在于这个窗口。

public class InfoNotification extends Window {
    /* Few members and constructor. Members assignment and run init() only. */

    /** This method is run from constructor */
    private void init() {
        setModal(true);
        setResizable(false);
        setStyleName("info_notification");

        okButton = new Button();
        okButton.addListener(getCloseButtonListener(this));
        okButton.setClickShortcut(ShortcutAction.KeyCode.ENTER);
        okButton.setCaption(okLabel != null ? okLabel : SessionData
            .getMessage("infoNotification.okLabel"));

        initLayout();
    }

    private void initLayout() {
        VerticalLayout componentLayout = (VerticalLayout) getContent();
        componentLayout.setWidth(600, UNITS_PIXELS);
        if (messages != null) {
            for (String message : messages) {
                componentLayout.addComponent(new Label(message));
            }
        }
        componentLayout.addComponent(okButton);
        componentLayout.setComponentAlignment(okButton,
            Alignment.BOTTOM_CENTER);
        setReadOnly(false);
    }

    public Button.ClickListener getCloseButtonListener(final Window window) {
        return new Button.ClickListener() { /* listener code */ };
    }
}

当我现在考虑它时，看起来窗口是 600px 宽，但 Vaadin 出于某种原因认为它非常薄（可能是几个像素？）。结果是它保留了更多的高度，因为它检测到许多换行符。实际上，根本没有换行符，并且没有使用空白空间。不过，这只是我的猜测。

---

EDIT2：我发现当我从组件中删除所有尺寸设置时，标签只有 87 像素宽。设置不同的标签宽度没有任何改变。

private void initLayout() {
    VerticalLayout componentLayout = (VerticalLayout) getContent();
    componentLayout.setWidth(600, UNITS_PIXELS);
    componentLayout.setSizeUndefined(); // Removes all size settings.
    // Rest of method is the same.
}

由 Vaadin 渲染的 HTML：

<div style="height: 36px; width: 87px; overflow: hidden; padding-left: 0px; padding-top: 0px;">
    <div style="float: left; margin-left: 0px;">
        <div class="v-label" style="width: 87px;">a a a a a a a a a a</div>
    </div>
</div>

Answer 1

我解决了这个问题。真正的罪魁祸首是我的 styles.css 中的 CSS 设置 .v-label { width: auto !important; }。这使得所有后来的宽度设置都被忽略了。