javascript - 内容出现在 div 之外

Question

我最近尝试了不同形状的 div，如三角形梯形等。

HTML：

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

CSS

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

以前，当 div 为正方形（高度和宽度均为 100px）时，内容可以正常显示。

当我将 div 设置为三角形时，内容就会溢出。

我怎样才能使这个比例成比例，以便在 div 中正确显示。

见小提琴：http: //jsfiddle.net/7qbGX/2/

任何建议都会很棒。

Answer 1

试试这个：链接

.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;
}

Answer 2

您的高度和宽度为 0。您不会将任何文本放入其中。它会溢出，或者您可以将溢出设置为“隐藏”，但是您将看不到任何内容，因为 div 的大小为 0。

Answer 3

在您的实际 div 中看不到您的 div 尝试为该 div 提供背景颜色。

[见演示] http://jsfiddle.net/salwenikhil0724/7qbGX/6/

.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;
}  

Answer 4

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

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

对于水平滚动，您可以将 overflow-x:hidden 由您决定。