如何在菱形元素内居中展示文本，超出内容末尾自动显示省略号

修正后完整代码 #

HTML

<input type="text" value="" id="text1" />
<div id="parent">
  <div id="rhombus">
    <div class="label">
      <span id="labeltext"></span>
    </div>
  </div>
</div>

CSS

#parent {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 40px;
}
#rhombus {
  width: 100px;
  height: 100px;
  background: lightsteelblue;
  transform: rotate(45deg);
  position: relative;
}
.label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#labeltext {
  transform: rotate(-45deg);
  display: block;
  width: 70px;
  overflow: hidden;
  white-space: nowrap;
  text-align: center;
  text-overflow: ellipsis;
}

JS

var textElement = document.getElementById("text1");
textElement.addEventListener("change", (event) => {
  document.getElementById("labeltext").textContent = event.target.value;
  window.localStorage.setItem("savedText", event.target.value);
});
if (window.localStorage.getItem("savedText")) {
  textElement.value = window.localStorage.getItem("savedText");
}

核心改动说明 #

• 给菱形容器添加position: relative属性，作为内部文本容器的定位基准
• 新增.label容器使用绝对定位居中，先把文本容器锚定在菱形的几何中心，避免旋转后位置偏移
• 给文本元素设置固定宽度70px（适配100px边长菱形的内部可用宽度，刚好不超出菱形边线），补充white-space: nowrap属性，配合已有的overflow: hidden和text-overflow: ellipsis实现文本超出自动显示省略号
• 移除原代码中无用的padding-top、flex布局相关冗余属性，简化实现逻辑

内容的提问来源于stack exchange，提问作者Veryon890