是否可以在不显示省略号的情况下使用线钳答案

【问题标题】：Is it possible to use line-clamp without displaying an ellipsis是否可以在不显示省略号的情况下使用线钳
【发布时间】：2022-12-21 07:01:21
【问题描述】：

我见过的所有使用 -webkit-line-clamp 属性的示例都会在最后一行的末尾显示一个省略号。是否可以将 ... 替换为其他内容或将其全部删除？

【问题讨论】：

这回答了你的问题了吗？ text-overflow change content of ellipsis
我看到了那个答案，但是当你设置那个属性时，chrome 开发工具会说“无效的属性值”——看起来答案是“否”

标签： html css

【解决方案1】：

您可以使用任何现有字体创建自定义字体并将其应用于该文本区域以完全隐藏省略号，如下面的 sn-p 所示，或将其更改为其他内容（遵循 cmets 中的想法SN-P）。

主要缺点是文本正文中出现的任何省略号字符也将被隐藏/修改，因此请确保您不希望出现任何省略号字符，或者通过搜索并替换 … -> ... 来解决它逻辑。

@font-face {
  font-family: "ellipsis-font";
  src: local("Courier");
  
  /*
   * The unicode for ellipsis ("…").
   * Makes it so this font face only gets applied to that single character
   */
  unicode-range: U+2026;
  
  /* Make it small to the point of being invisible */
  size-adjust: 0%;
  
  /*
   * You could also create a custom font with a different
   * glyph corresponding to the ellipsis character, so you
   * could use a custom character instead of just hiding it.
   */
}

.my-container {
  /* Standard line clamp CSS */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  width: 180px;

  /*
   * Putting our custom font in the front ensures
   * it handles the ellipsis display, the second font
   * in line should handle everything else
   */
  font-family: ellipsis-font, 'Times New Roman', serif;
}

<div class="my-container">
  This is……………………………………………………

  <!-- Note how any ellipses in the main text also get hidden. That's one drawback -->

  some lengthy text that is bound to get abruptly cut off by overflow
</div>

【讨论】：