javascript - div 内的 p 元素比父 div 宽

Question

查看链接。它的父元素中的 p 元素具有更大的宽度。我想在对话框中显示 p。我该怎么做？

http://jsfiddle.net/2y1wj0mm/

.dialog-box {
margin:0 auto;
width:300px;
height:200px;
background-color:#326A16;
-webkit-filter:drop-shadow(0px 0px 5px #000000);
border-radius:20%/34%;
}
.dialog-box:before {
content:"";
position: absolute;
width: 0px;
height: 0px;
border-right: 21px solid transparent;
border-left: 18px solid transparent;
border-top: 42px solid #326A16;
margin:195.71428571428572px 90px;
}
.dialog-box p {
display:inline;
margin:10% 14%;
text-wrap:normal;
}

Answer 1

更新您的.dialog-box:

.dialog-box p {
    display: block;
    margin:10% 14%;
    width: 200px;
    word-wrap: wrap;
    word-break: break-all;
    padding-top: 30px;
}

这里要做 3 件事:

1. display: inline 不适用于您的情况；你必须使用 p 元素的宽度和高度
2. 您必须使用 word-wrap 和 word-break 来换行和分词
3. 您可能需要使用 padding-top
将单词放在绿色对话框中

旁注:

没有必要设置这么多小数位的边距。仅使用整数。

演示:http://jsfiddle.net/9bpyjnfL/1/