Javascript 内容出现在div之外

我最近试过不同形状的div，比如三角形梯形等等

HTML:

<div class="triangle">HI nice to meet you guys</div>

以前，当div为正方形（高度和宽度为100px）时，内容会正确显示

当我将div样式设置为三角形时，内容就会流动

我怎样才能使这一个成为比例，以便正确地出现在div中

参见小提琴：

---

任何建议都很好。

你的身高和宽度是0。你不能在里面放任何文字。它将溢出，或者您可以将溢出设置为“隐藏”，但由于div的大小为0，因此您将看不到任何内容。

请尝试以下操作：

---

在实际的div中看不到您的div尝试为该div添加背景色

[见演示]

---

这是为了正确显示文本，您需要按如下方式指定宽度属性：-

  <div style="width: 10em; word-wrap: break-word;">
   Some longer than expected text with antidisestablishmentarianism
  </div>

一些比预期更长的文本带有反教条主义

---

对于水平滚动，您可以将overflow-x:隐藏它，这取决于您，亲爱的。

您的div不可见，没有大小，只有边框可见，因此内容溢出…并且内容从预期的位置开始，在左边框的末尾。感谢您的回复，或者是否有办法显示三角形中的内容已回答请修复小提琴中的结束标记

p

，否则看起来不错。固定高度问题可以通过JavaScript/jQuery进行响应。

.triangle{
    width: 0px;
    height: 0px;
    border-style: inset;
    border-width: 0 100px 173.2px 100px;
    border-color: transparent transparent #007bff transparent;
    float: left;
    transform:rotate(360deg);
    -ms-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -webkit-transform:rotate(360deg);
    -o-transform:rotate(360deg);
}

.triangle p {
    text-align: center;
    top: 80px;
    left: -47px;
    position: relative;
    width: 93px;
    height: 93px;
    margin: 0px;
}

.triangle {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid blue;
    background-color:red;

}
.triangle p {
    text-align: center;
    top: 40px;
    left: -47px;
    position: relative;
    width: 93px;
    height: 93px;
    margin: 0px;
}  

  <div style="width: 10em; word-wrap: break-word;">
   Some longer than expected text with antidisestablishmentarianism
  </div>