css3triangle中的文本对齐

我在div中设置文本样式时遇到问题，div是三角形的。所有这些都是用CSS完成的

三角形目前的位置完全符合大型项目的需要（我已经从大型项目中删除了代码，因为它与此无关）

这是一个

请参阅下面的代码：

HTML

---

由于

div

的宽度为零，因此每对单词之间将有一个换行符

解决方案可能是使用一个元素创建形状，并将文本放在另一个元素中

您需要意识到三角形实际上是位于顶部顶点的0x0元素的非常厚的边界，并相应地定位

在这里，我将文本定位在三角形的基线处，并使其宽度从底部的一个顶点到另一个顶点。可以随意调整文本元素的大小，以避免文本溢出三角形。但是，我恐怕不能让文本在三角形中流动：

HTML:

---

因为

div

的宽度为零，所以每对单词之间都会有一个换行符。@JanDvorak我在玩弄宽度，看看你到底在说什么。现在唯一的问题是它不会以三角形的形式存在，而是以梯形的形式存在。

<div>Here is a Triangle</div>

div {
    text-align: center;
    color: #fff;
    font-size: 1.125em;
    width: 100%;
}

div:nth-child(1) {
    position: absolute;
    top: 100px;
    left: 100px;
    width: 0;
    height: 0;  
    border-left:    126px solid transparent;
    border-right:   126px solid transparent;
    border-bottom:  126px solid #D30000;
}

<div class="triangle"><div class="text">Here is a Triangle</div></div>

div { /*your original CSS*/ }
div.triangle { /* your original CSS for div:nth-child(1) */ }

div.text {
    position: absolute;
    bottom: -126px; /* baseline */
    left: -126px;   /* left tip */
    right: -126px;  /* right tip */
    width: auto;    /* reset width:100% from div */
    height: auto;   /* just in case */
}