时间戳

首页 > 解决方案 > 如何仅在一行上阅读更多文本

html - 如何仅在一行上阅读更多文本

问题描述

我的文本长度可能不超过 12 个字符，如果是已读文本，则应显示更多文本。

例如“这是一个...阅读更多”。

这感觉像是一件容易的事，问题是文本可能只在一行，并且不允许多行。

如果宽度较小，则文本应自动调整大小并且可能少于 12 个字符。例如：“这是……阅读更多”。

起初，这感觉像是一项简单的任务，但现在我对如何存档感到非常困惑。

到目前为止，我设法找到的是，如果文本足够短，我可以像这样放置 div 以便它保持在一行：

<div style="display: inline-block; white-space: nowrap;">
<span>this is a test text</span>
</div>
<div>
<span>read more</span>
</div>

非常感谢任何帮助或输入，谢谢。

标签： htmlcss

解决方案

如果可能，您应该添加宽度或最大宽度。

选项1：

.preview{
  display: inline-block;
  max-width: 50px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.more{
  display: inline-block;
  overflow: hidden;
}
<div>
  <span class="preview">this is a test text</span>
  <span class="more">read more</span>
</div>

选项 2：

使用after 伪元素：

.container::after{
  content: 'read more';
  display: inline-block;
  overflow: hidden;
}

.preview{
  display: inline-block;
  max-width: 50px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
<div class="container">
  <span class="preview">this is a test text</span>
</div>

选项 3：

尝试：

display: flex;
flex-direction: row;

我希望它有帮助！

奖金：

您可以ch用作宽度，即“字符单位”。

元素字体的字形“0”的提前量度（宽度）。资源

例子：

width: 12ch;

推荐阅读