在css中不使用省略号添加点点点[duplicate]

6tqwzwtp 于 2023-01-14 发布在其他

关注(0)|答案(2)|浏览(167)

- 此问题在此处已有答案**：

text-overflow change content of ellipsis（2个答案）
3天前关闭。
我在一个使用日语的应用程序中工作，当使用特定的字体系列和text-overflow: ellipsis时，省略号很笨拙。我不想更改语言或字体系列，但当发生溢出隐藏时，我需要在末尾添加...""。
如下图所示，当使用lang='ja'和font-family: 'Meiryo', 'Hiragino Kaku Gothic ProN', 'MS PGothic', sans-serif;时，text-overflow: ellipsis会给出一个奇怪的省略号。

我试过：

text-overflow: '...';
   overflow: hidden;

但它只能在火狐浏览器中运行，在Chrome浏览器中不起作用。
我也试过style.less

.myClass {
   overflow: hidden;
   &::after {
      content: '...';
      }
  }

但是我看不见最后的点。而且我认为这种方法不会起作用，因为它仍然会显示当我溢出没有发生。
有没有办法解决这个问题，不使用text-overflow: ellipsis属性就显示...""？
谢谢你。

css

来源：https://stackoverflow.com/questions/75077736/add-dot-dot-dot-without-using-ellipsis-in-css

2条答案

按热度按时间

krugob8w1#

不经过仔细考虑就重新实现自己版本的省略号替换可能不太可靠。相反，您仍应使用text-overflow: ellipsis;，但更改专门用于绘制省略号的字体。
您可以导入带有省略号的字体子集。一些字体API（如Google Fonts）可能会提供特定字符的选择，但请注意，不要让缓存版本的字体代替子集版本，因为用户的浏览器已经从其他网站加载了完整的字体。例如，您可以从谷歌字体请求子集，然后下载该文件，自己提供，而不是使用他们的API。还有其他工具可用于子集字体文件以及。
将该字体设置为主字体，只使用一个字符码位，然后使用现有的日语字体作为列表中的第二种字体，这样除了省略号之外的所有字符都福尔斯为该字体。

font-family: EllipsisOnly, OriginalFont, sans-serif;

赞(0）回复(0）举报 2023-01-14

gev0vcfq2#

我认为如果您正在寻找ellipsis的替代方法，可以使用line-clamp

.container {
  width: 200px;
  height: 200px;
}

.container a {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

<div class="container">
  <a href="#">https://www.google.com/search?q=test&sxsrf=AJOqlzWNoUUAOimgD4A3hBszbmaNaPgnVw%3A1673411070272&source=hp&ei=_jm-Y5q-Deys5NoPprGNoAs&iflsig=AK50M_UAAAAAY75IDtpFnzh-ep_zI64uvq-ypac-DtRk&ved=0ahUKEwiatZ2D1r78AhVsFlkFHaZYA7QQ4dUDCAo&uact=5&oq=test&gs_lcp=Cgdnd3Mtd2l6EAMyBQgAEJECMgQIABBDMgoIABCxAxCDARBDMgQIABBDMgoIABCxAxCDARBDMgUIABCABDIFCAAQgAQyCwgAEIAEELEDEIMBMggIABCABBCxAzIFCAAQgAQ6BwgjEOoCECc6BAgjECc6BAguEEM6EAguELEDEIMBEMcBENEDEENQxAFYtgRgggdoAXAAeACAAdwCiAGYCpIBAzMtNJgBAKABAbABCg&sclient=gws-wiz</a>
</div>

赞(0）回复(0）举报 2023-01-14

我来回答

在css中不使用省略号添加点点点[duplicate]

2条答案

相关问题

热门标签

最新问答