如何使文字不包装

Question

您好我正在尝试在我的div的中心放置一段文字并使其不包裹，我已经让它不要换行但现在文本的末尾从我的屏幕上消失了！

＆＃13;

＆＃13;

#title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  font-weight: bold;
  font-size: 50px;
  white-space: nowrap;
}

＆＃13;

<h1 id="title">This is my text</h1>

＆＃13;

＆＃13;

＆＃13;

Answer 1

如果您不想包装文字，则必须执行其他操作，例如省略号（最后3个点），只需设置＆＃39; 宽度＆＃39;元素和设置＆＃39; 文本溢出＆＃39;到＆＃39;省略号＆＃39;。

＆＃13;

＆＃13;

#title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  font-weight: bold;
  font-size: 50px;
  white-space: nowrap;
  overflow:hidden;
  width:50%;
  text-overflow:ellipsis;
}

＆＃13;

<h1 id="title">This is my text</h1>

＆＃13;

＆＃13;

＆＃13;