带有不可收缩项目（flexbox）的多行文本溢出[重复]答案

【问题标题】：Multiple lines text-overflow with unshrinkable item (flexbox) [duplicate]带有不可收缩项目（flexbox）的多行文本溢出[重复]
【发布时间】：2020-10-15 17:44:59
【问题描述】：

这就是我想要做的↓

这就是我所拥有的（基本上，我不会像那样实现文本溢出，但至少它会是一些东西。不幸的是，即使这样也行不通）：

.parent {
  max-height: 40px;
  display: flex;
  flex-wrap: wrap;
  width: 200px;
  background-color: grey;
}
  
.long {
  flex: 0 1 auto;
}

.short {
  flex: 1 0 auto;
}

<div class="parent">
  <span class="long">Some long long long long long really long text</span>
  <span class="short">short text</span>
</div>

【问题讨论】：

看起来不像是弹性工作，你可能必须通过js截断长文本。

标签： html css flexbox

【解决方案1】：

我之前的评论通过一个例子来证明它的答案：

看起来不像是弹性工作，你可能必须通过js截断长文本

这是一个示例，灵感来自：Smart way to truncate long strings（阅读答案以进一步了解）

// set your var 
let lgtxt = document.querySelector(".long");
let n = 40;

//function to do the job 
function truncate(str, n) {
  return (str.length > n) ? str.substr(0, n - 1) + '...' : str;
}


//fire it once content is loaded
window.onload = function() {
  let str = lgtxt.textContent;
  lgtxt.textContent = truncate(str, n);
};

.parent {
  max-height: 40px;
  width: 200px;
  background-color: grey;
  text-align:justify;
  text-align-last:justify;
  padding:0 0.25em;
}

.short {
  color: lightgray
}

<div class="parent">
  <span class="long">Some long long long long longlong long long longlong long long long really long text</span>
  <span class="short">short text</span>
</div>

Flex 在这里帮不了你:(

【讨论】：

哦，谢谢！我尝试使用flex 的原因是flex-shrink 属性（为.short 设置该属性为0）。但我想您的解决方案是最好的解决方案之一，即使它不是我希望的那样准确。我会等一下，如果没有更好的解决方案，我会将您的评论标记为解决了我问题的评论。

【解决方案2】：

我认为他们不需要使用弹性盒。
如果你只是想要截断的文本，你可以像这样使用 Javascript 来做到这一点。

HTML 代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS truncates a string</title>
</head>
<body>
</body>
</html>

JavaScript 代码

text_truncate = function(str, length, ending) {
    if (length == null) {
      length = 100;
    }
    if (ending == null) {
      ending = '...';
    }
    if (str.length > length) {
      return str.substring(0, length - ending.length) + ending;
    } else {
      return str;
    }
  };
console.log(text_truncate('We are doing JS string exercises.'))
console.log(text_truncate('We are doing JS string exercises.',19))
console.log(text_truncate('We are doing JS string exercises.',15,'!!'))

样本输出

We are doing JS string exercises.
We are doing JS ...
We are doing !!

【讨论】：

【解决方案3】：

试试这个。你会得到相同的结果。

.parent {
  width: 250px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  background-color: grey;
}

.long {
  text-indent: 25px;
}

.short {
  color: black;
}

<div class="parent">
  <span class="long">Some long long long long  <br /> long really long text...<span class="short">short text</span></span>
  

</div>

【讨论】：

【解决方案4】：

您使用了max-height: 40px;，这就是为什么您的内容在 40 像素后从 .parent 溢出

如果您希望您的背景颜色包裹整个内容，请删除 max-height: 40px; 即可。

如果您希望在开头有那个空间，请使用 CSS 伪元素 ::first-letter，如下例所示，或者您也可以使用 text-indent: 20px;

<style>
  .parent {
    /* max-height: 40px; */
    display: flex;
    flex-wrap: wrap;
    width: 200px;
    background-color: grey;
    color: #fff
  }

  .long {
    flex: 0 1 auto;
    font-size: 16px;
    /*text-indent: 25px; you can use this too*/ 
  }

  .long::first-letter { /*if you use text-indent, remove this*/
    margin-left: 20px;
  }

  .short {
    flex: 1 0 auto;
    font-size: 14px;
    text-align: right;
  }
</style>


<div class="parent">
  <span class="long">Some long long long long long really long text</span>
  <span class="short">short text</span>
</div>

如果您希望所有文本都在一行中，就像您的示例一样，您应该将所有文本包装在一个元素中，并使用像 span 或 a 这样的内联元素包装短文本在下面的示例中-

<style>
  .parent {
    /* max-height: 40px; */
    padding: 0 5px;
    width: 200px;
    background-color: grey;
    color: #fff
  }

  .long {
    font-size: 16px;
  }

  .long::first-letter {
    margin-left: 30px;
  }

  .short {
    font-size: 14px;
    float: right;
    color: #ddd
  }
</style>


<div class="parent">
  <p class="long">Some long long long long long really long text ...<span class="short">short text</span></p>
</div>

【讨论】：