Question

你会在第二个“分隔符”上看到问题，如果文字太长，文字会被破坏。
即使有溢出和文本溢出，它也没有帮助：

CSS：

.seperatorLabel {
    vertical-align: middle;
    display: inline-block;
    height: 22px;
    line-height: 22px;
    overflow:hidden;
    text-overflow:ellipsis;
}

HTML：

<div class="formSeparatorCon">
    <div id="sep1" class="formSeparator">
        <div class="arrow"></div>
        <div class="seperatorLabel">Prüfung</div>
    </div>
</div>

Answer 1

指定容器的宽度。它不知道溢出开始的位置，因为它认为宽度为100％。以像素为单位指定宽度像下面的代码一样：

.seperatorLabel {
    vertical-align: middle;
    display: inline-block;
    height: 22px;
    line-height: 22px;
    overflow:hidden;
    text-overflow:ellipsis;
    width: 200px;
}

Answer 2

将.arrow位置编辑为绝对并删除显示（正确的左侧和顶部定位），并且所有添加了max-width：100％的容器似乎都能正常工作。在calc()的帮助下，它现在似乎很完美。

结果：http://jsfiddle.net/bergi9/33x6asvk/2/

没有Brewal对max-width的评论我不会有这个结果

文字布局破了

2 个答案: