如何将文本置于三角形按钮内？按钮文本溢出问题求助

这个问题我之前也碰到过，你用border绘制的三角形按钮之所以文本跑到外面，核心原因是border绘制形状的逻辑和常规按钮不一样：咱们用border做的三角形，其实是靠边框的拼接形成的视觉效果，按钮本身的内容区域（就是放文本的地方）被border-top: 140px给挤到了三角形的下方，所以文本自然就不在三角形范围内了。

下面给你两种可行的解决方案，你可以根据需求选：

方案一：用额外标签包裹文本，绝对定位到三角形内部 #

这种方法最灵活，方便单独控制文本的样式和位置：

修改后的CSS代码 #

.collapsible { 
  position: absolute; 
  left: 40%; 
  /* 设置相对定位，让内部文本的绝对定位以按钮为基准 */
  position: relative;
  /* 清除按钮默认的内边距和边框，避免干扰 */
  padding: 0;
  border: none;
  background: transparent;
  /* 可选：给按钮设置宽度，避免页面布局混乱 */
  width: 280px;
}
.triangle { 
  font-size: 22px; 
  /* 用border做三角形时，宽高必须设为0，否则内容区域会挤占空间 */
  width: 0; 
  height: 0; 
  border-top: 140px solid #2b2b2b; 
  border-left: 140px solid transparent; 
  border-right: 140px solid transparent; 
}
/* 控制文本的定位和样式 */
.collapsible .btn-text {
  position: absolute;
  /* 向上移动到三角形内部，数值可以根据你的三角形大小调整 */
  top: -120px;
  /* 水平居中 */
  left: 50%;
  transform: translateX(-50%);
  /* 文本颜色改成白色，在深色三角形上更清晰 */
  color: #fff;
  /* 限制文本宽度，避免超出三角形范围 */
  max-width: 180px;
  text-align: center;
}

修改后的HTML代码 #

<button class="collapsible triangle" id="collapse">
  <span class="btn-text">Some content</span>
</button>

方案二：直接给按钮设置文本定位（无需额外标签） #

如果不想加额外标签，也可以直接给按钮本身设置文本的位置：

CSS代码 #

.collapsible { 
  position: absolute; 
  left: 40%; 
  position: relative;
  padding: 0;
  border: none;
  background: transparent;
  width: 280px;
  /* 直接控制按钮内文本的位置 */
  color: #fff;
  text-align: center;
}
.triangle { 
  font-size: 22px; 
  width: 0; 
  height: 0; 
  border-top: 140px solid #2b2b2b; 
  border-left: 140px solid transparent; 
  border-right: 140px solid transparent; 
  /* 用text-indent和line-height调整文本位置 */
  text-indent: -90px;
  line-height: 120px;
}

HTML代码 #

<button class="collapsible triangle" id="collapse">Some content</button>

关键知识点总结 #

• 用border绘制三角形时，必须把元素的width和height设为0，否则元素的内容区域会挤占空间，导致文本偏离。
• 要让文本在三角形内部，必须通过定位（absolute）或者文本属性（text-indent、line-height）把文本“拉”到border形成的三角形区域内。
• 别忘了给按钮设置position: relative，否则绝对定位的文本会以整个页面为基准，而不是按钮本身。

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