html - 最大宽度不适用于百分比

Question

我对 css 中的“max-width”属性有疑问。在我的网站中，有一个标题仅限于一行并且在溢出时具有此属性:

text-overflow: ellipsis;

一切正常，溢出表现良好，但出于某种原因，当我在 max-width 属性中使用百分比时，它不会缩小标题的 div。

CSS:

.card-content-title {

  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;

  max-width: 80%;

  text-align: left;
  font-family: $roboto-condensed-regular;
  font-size: 18px;
  color: $inactive-text-color;

  margin-top: 13px;
  margin-bottom: 0;
  padding: 0;
}

HTML:

<div class="row">
    <div class="card-menu">
        <div class=" card-menu-item"></div>
        <div class=" card-menu-item"></div>
        <div class=" card-menu-item"></div>
        <div class=" card-menu-item"></div>
    </div>

    <div class="card-content">
        <div class="row">
           <div class="card-content-title">(here is the title)</div>
    </div>
</div>

结果:

如果我将最大宽度更改为像素，而不是百分比:

max-width: 200px

结果:

有什么方法可以避免使用百分比时的溢出行为？

编辑:有 .row 的 css:

.row {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    padding: 5px;
    width: 100%;
}

Answer 1

请检查下面的代码片段，它有两个部分，一个是 50% max-width，另一个是 200px max-width。

注意:在您复制到此处的代码中，缺少结束 div。

.row {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    padding: 5px;
    width: 400px;
}

.card-content-title {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;

  text-align: left;
  font-family: $roboto-condensed-regular;
  font-size: 18px;
  color: $inactive-text-color;

  margin-top: 13px;
  margin-bottom: 0;
  padding: 0;
}

.card-content-title-1 {
  max-width: 50%;
}
.card-content-title-2 {
  max-width: 200px;
}

<div class="row">
  <div class="card-menu">
    <div class=" card-menu-item"></div>
    <div class=" card-menu-item"></div>
    <div class=" card-menu-item"></div>
    <div class=" card-menu-item"></div>
  </div>

  <div class="card-content">
    <div class="row">
      <div class="card-content-title card-content-title-1">
        (here is the title here is the title here is the title here is the title)
      </div>
    </div>
  </div>
</div>

<div class="row">
  <div class="card-menu">
    <div class=" card-menu-item"></div>
    <div class=" card-menu-item"></div>
    <div class=" card-menu-item"></div>
    <div class=" card-menu-item"></div>
  </div>

  <div class="card-content">
    <div class="row">
      <div class="card-content-title card-content-title-2">
        (here is the title here is the title here is the title here is the title)
      </div>
    </div>
  </div>
</div>