时间戳

首页 > 解决方案 > 根据文本长度灵活地在一个区域中省略两个空格

html - 根据文本长度灵活地在一个区域中省略两个空格

问题描述

我想根据我网站上的文字长度灵活地省略一个区域中的两个空格。在代码笔页面（https://codepen.io/jiniC/pen/QWpzOeo）的情况下，我想只缩写 text1 文本，同时暴露 text2 区域中的所有文本。

<div class="box">
  <span class="item text1">ellipsis test ellipsis test ellipsis test ellipsis test</span>
  <span class="ico">&nbsp|&nbsp</span>
  <span class="item text2">full text</span>
</div>

.box {
  width: 300px;
  background-color: green;
  display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}
.item {
  flex: 0 1 auto;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  color: white;
}

我知道在某种程度上可以通过将最小宽度值赋予项目区域。但是，如果给出了 min-width，则当文本小于 min-width 值时会留下空格。我希望文本完全暴露到一定长度，即使长度短时没有边距。

也就是说，我不希望出现以下情况： 在此处输入图像描述

这只能通过样式实现吗？

以下是一些不同曝光的示例，具体取决于我想要的文本长度。
[text1]|[text2]
[Short Short text1]|[text2]
[很长的 text1 必须是 elli...]|[Short text2]
[text1]|[很长的 text2 必须是椭圆形... ]
[很长的text1，h...][很长的text2，h...]

标签： htmlcssweb

解决方案

我认为您走在正确的道路上，但不太确定如何实现这一目标，除非您对项目使用最大宽度。看看这是否有帮助：https ://www.benmarshall.me/max-character-length-ellipsis-css/

推荐阅读