调整浏览器窗口大小时如何显示带点的文本？ [复制]

Posted 2023-05-07

【中文标题】调整浏览器窗口大小时如何显示带点的文本？ [复制]

【英文标题】：How to display a text with dots when resizing the browser window? [duplicate]

【发布时间】：2020-02-15 01:34:41

【问题描述】：

当我使用 CSS 调整浏览器窗口大小时，如何用点显示我的文本？

例如：

我的文字

'世界你好！欢迎来到编码'

调整大小后

世界你好！欢迎来到公司...

世界你好！欢迎您... （会根据窗口大小显示点）

【问题讨论】：

使用text-overflow 可能会对您有所帮助

【参考方案1】：

试试这个 CSS。

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

【参考方案2】：

您可以使用 text-overflow: ellipsis;overflow: hidden;white-space: nowrap;

将其归档

欲了解更多信息，请访问：text-overflow

如果您对此有任何疑问，请告诉我。

希望对您有所帮助

    .app a 
  width: 140px;
  padding: 0;
  overflow: hidden;
  position: relative;
  display: inline-block;
  margin: 0 5px 0 5px;
  text-align: center;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #000;

<div class="app">
  <a href="">Hello world! Welcome to Coding</a>
</div>

【参考方案3】：

以下是如何使用text-overflow: ellipsis; 的基本示例。您需要存在 overflow: hidden; 属性以及 white-space: nowrap;

html：<p class="overflow"> this text will not wrap and will show the ellipsis when it is wider than the screen width</p>

CSS：

.overflow 
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;