为什么省略包裹的省略号子代的内联块父代似乎总是出现完整的文本?

问题描述

请检查以下示例 JsBin ，这里我们有简单的布局我们有一个孩子的文本太长，我们需要将其设置为no-wrap ellipsis以避免布局中断，但是父级似乎比实际显示的文本占据更多的宽度(可能等于该文本).

Please check this example JsBin, here we have simple layout we have a child which have too long text and we need to make it no-wrap ellipsis to avoid breaking of layout but parent seems to occupy the width more then (probably equal to the text) the actual displayed text.

下面是代码

HTML

<div class="title-logo-container" >
 <span class="logo">
   <a href="/" >                
        <img src="" alt="LOGO IMAGE">
   </a>

</span>
<p class="page-title" s>
    test test test test test test test test test test test test test test test 
</p>

CSS

.title-logo-container {
  border: solid 1px #f00;
  display:inline-block;
  float:left;
}

.logo {
    margin: 1.375em 1.5625em 15px;
    padding: 0;
    position: relative;
    width: 5.625em;
    z-index: 103;
    display: inline-block;
}

.page-title {
    max-width:40%;
    display: inline-block;
    margin: 0;
    font-weight: 400;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

请提出建议.

预期输出

推荐答案

您要为内联代码块指定最大最大宽度百分比，该内联代码块是没有显式宽度的float的子代.这会导致未定义的行为，因为存在循环依赖性在父(浮动)宽度和子(内联块)宽度之间.

You're specifying a percentage max-width for an inline-block that is a child of a float that doesn't have an explicit width. This results in undefined behavior because there is a circular dependency between the parent (float) width and the child (inline-block) width.

浏览器的明显行为是，将float收缩包装为其内容的大小-刚好足以将内容包含在一行中-因此，它具有一个大小，内联块可以以此为基础最大宽度为40％.然后，内联块通过overflow: hidden剪切其内容.浮点数的大小不再计算.

The apparent browser behavior is that the float is shrink-wrapped to the size of its contents — just enough to contain the content in one line — first, so that it has a size on which the inline-block can then base its 40% max-width. The inline-block then clips its content via overflow: hidden. The size of the float is not computed again.

这篇关于为什么省略包裹的省略号子代的内联块父代似乎总是出现完整的文本?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！