Html 具有不可滚动项的多行文本溢出（flexbox）

这就是我想做的↓

这就是我所拥有的（基本上，我不会实现这样的目标，但至少会有一些成就。不幸的是，即使这样也不行）：

.parent{
最大高度：40px；
显示器：flex；
柔性包装：包装；
宽度：200px；
背景颜色：灰色；
}
.朗{
flex:01自动；
}
.短{
弹性：10自动；
}

一些很长很长的文字
短文

我认为没有必要使用FlexBox。
如果您只需要截断的文本，可以使用Javascript这样做

HTML代码

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,'!!'))

JS截断字符串

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 !!

---

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

.parent{
宽度：250px；
高度：50px；
显示器：flex；
证明内容：中心；
对齐项目：居中；
颜色：白色；
背景颜色：灰色；
}
.朗{
文本缩进：25px；
}
.短{
颜色：黑色；
}

一些很长的
很长很长的文本…短文本

您使用的

最大高度：40px

这就是为什么在40px之后，您的内容从

.parent

溢出的原因

如果您希望背景色包裹整个内容，请删除

max height:40px就这些了

如果您希望在开始时使用该空格，请使用CSS伪元素
：：第一个字母
，如下例所示，或者您可以使用
文本缩进：20px以及



.家长{
/*最大高度：40px*/
显示器：flex；
柔性包装：包装；
宽度：200px；
背景颜色：灰色；
颜色：#fff
}
.朗{
flex:01自动；
字体大小：16px；
/*文本缩进：25px；您也可以使用它*/
}
.long:：第一个字母{/*如果使用文本缩进，请删除此*/
左边距：20px；
}
.短{
弹性：10自动；
字体大小：14px；
文本对齐：右对齐；
}
一些很长很长的文字
短文
我之前的评论中给出了一个答案，并举例说明：

看起来不像flex作业，您可能必须通过js截断长文本

以下是一个受启发的示例：（阅读答案以进一步了解）


//设置您的变量
设lgtxt=document.querySelector（“.long”）；
设n=40；
//职能
函数截断（str，n）{
返回（str.length>n）？str.substr（0，n-1）+’…'：str；
}
//加载内容后立即启动它
window.onload=函数（）{
设str=lgtxt.textContent；
lgtxt.textContent=truncate（str，n）；
};
.parent{
最大高度：40px；
宽度：200px；
背景颜色：灰色；
文本对齐：对齐；
文本最后对齐：对齐；
填充：0.25em；
}
.短{
颜色：浅灰色
}

一些很长很长的文字
短文
看起来不像flex作业，您可能需要通过js截断长文本。噢，谢谢！我尝试使用
flex
的原因是
flex-shrink
属性（将该属性设置为0表示
.short
）。但我想你的解决方案是最好的，即使它不是我所希望的那样准确。我会等一会儿，如果没有更好的解决方案，我会把你们的评论标记为解决了我的问题。