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

- arvind

---

你的 margin:195.71428571428572px 发生了什么？ - Raptor

Answer 1

更新你的.dialog-box：

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

这里需要做三件事情：

1. display: inline 在你的情况下无法使用，你必须使用 p 元素的宽度和高度。
2. 你需要使用 word-wrap 和 word-break 来包裹并断开单词。
3. 你可能需要使用 padding-top 将单词放在绿色对话框内。

附注：

将边距设置为那么多小数位是没有意义的，只需使用整数即可。

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

- Raptor

---

也许可以使用overflow-wrap: normal代替word-wrap: wrap;，因为根据MDN的说明，前者是原始属性，后者只是一个别名，在未来可能会被弃用。 - quizmaster987

Answer 2

这种情况是因为您输入的文本中没有任何空格，因此浏览器不知道如何分隔这些长行。您可以使用 word-wrap 属性来指示浏览器如何处理：

.dialog-box {
    /* ... */
    word-wrap: break-word;
}

Demo: http://jsfiddle.net/2y1wj0mm/1/

- dfsq

Answer 3

尝试这样写：演示 CSS：

.dialog-box p {
    display:block;
    margin:10% 14%;
    width:80%;
    word-wrap: break-word;
}

- G.L.P

Answer 4

.dialog-box p {
    display: block;
    height: 180px;
    margin: 10% 14%;
    overflow: hidden;
    word-wrap: break-word;
}

- Daney

Answer 5

使用这个

dialog-box p {
margin: 10% 10%;
padding: 13px 0px 0px 0px;
word-wrap: break-word;
}

- Sunil Kumawat

Answer 6

JSFIDDLe

http://jsfiddle.net/2y1wj0mm/4/

.dialog-box p {
 //you can use inline-block also but you need to adjust the margin and padding
    display:block;
    margin:10%;
    width:80%;
    word-wrap: break-word;
    padding:5%;
}

默认情况下，p是块级元素。因此，将应用默认的CSS样式，因此您不能将其用作内联元素

- Manjunath Siddappa

Answer 7

尝试一下，我将代码中的 p 更改为 block 元素，并为其设置了宽度。

.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-block;
    width:260px;
    margin:20px;
    
    text-wrap:normal;
    word-break:break-all;
}

<div class="dialog-box">
    <p>hi there?kjhkjhkgygyfyjfffhjvhvvjhjassasasasa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa c c vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv</p>
</div>

- Akshay