div中的p元素比父div宽

rv

看一下链接。其父级中的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;
}
猛禽

更新您的.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/

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

div传递父div的全宽

来自分类Dev

div 元素内的全宽?

来自分类Dev

表行比父div表宽

来自分类Dev

使用javaScript访问父div中的元素?

来自分类Dev

垂直对齐父div中的元素

来自分类Dev

使用javaScript访问父div中的元素?

来自分类Dev

父DIV为全宽,子div为特定宽度

来自分类Dev

动态分隔子 div 以占据父 div 的全宽

来自分类Dev

如何在父元素 (div) 中水平堆叠元素(卡片)

来自分类Dev

父div之外的子元素

来自分类Dev

固定div在父元素之外

来自分类Dev

使图像比父<div>宽,同时保留垂直空间?

来自分类Dev

TailwindCSS-固定flex父级的div全宽

来自分类Dev

图片未占用父div上设置的全宽

来自分类Dev

Amcharts 迷你图采用父 div 的全宽(100%)

来自分类Dev

位置固定的父div的子元素中的scroll属性

来自分类Dev

查找某个div中某个元素的父级

来自分类Dev

在父级中显示div元素,其中隐藏了溢出

来自分类Dev

影响悬停时父div中的其他元素

来自分类Dev

无法使用 jQuery 获取远程父 div 中的元素

来自分类Dev

使用 PHP 将 p 元素插入到 div 元素中

来自分类Dev

Bootstrap 3全宽div在容器中

来自分类Dev

砌体:流体div中的相同列宽

来自分类Dev

使用CSS在父div上的叠加层中居中div元素?

来自分类Dev

Javascript,游戏,如何确定javascript中div元素相对于父div的位置(x,y)?

来自分类Dev

使div元素足够宽以容纳文本字符串

来自分类Dev

将div拉伸到固定宽度元素内的全宽

来自分类Dev

父div中是否等于空格div?

来自分类Dev

对齐父DIV中的中心子DIV