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/

Answer 2

之所以發生這種情況，是因為你放入了沒有任何空格的文本，因此瀏覽器不確定如何打破這些長線。 您可以使用word-wrap屬性來指示它：

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

演示： http ： //jsfiddle.net/2y1wj0mm/1/

Answer 3

試試這個我改變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 cc vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv</p> </div> 

Answer 4

試試這樣： 演示

CSS：

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

Answer 5

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

Answer 6

用這個

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

Answer 7

的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將在這里應用所以你不能用作內聯元素