html文字段落宽度,html – 使兄弟元素采用相同的宽度打破其中的文本

如果我在这里没有完全弄错,那么使用CSS跨浏览器进行工作的唯一方法是将display：inline-block与display：table-row / display：table-caption结合起来.

堆栈代码段

.panel {

margin-bottom: 20px;

display: inline-block;

Box-shadow: 0 2px 4px 0 #C6C2BF;

padding: 0.5rem 1rem 1rem;

}

.user-title {

display: table-row;

}

.panel > div {

display: table-caption;

caption-side: bottom;

}

Date 08.03.2018 User: Joe Doe

Some long text in the paragraph that is wider than the title above it

Another shorter text

如果你不关心IE,那么使用width：0;最小宽度：100％;在.parent div.

注意,我在Edge v.16,Firefox v.58和Chrome v.64上成功测试了这一点,但是如果它适用于Safari我就不能说了.

堆栈代码段

.panel {

margin-bottom: 20px;

display: inline-flex;

flex-direction: column;

Box-shadow: 0 2px 4px 0 #C6C2BF;

padding: 0.5rem 1rem 1rem;

}

.panel > div {

width: 0;

min-width: 100%;

}

Date 08.03.2018 User: Joe Doe

Some long text in the paragraph that is wider than the title above it

Another shorter text

更新

经过一些反复试验,我在IE11和Edge / Firefox / Chrome上都有这个功能

堆栈代码段

.panel {

margin-bottom: 20px;

display: inline-flex;

flex-direction: column;

Box-shadow: 0 2px 4px 0 #C6C2BF;

padding: 0.5rem 1rem 1rem;

}

.panel > div {

width: 0;

min-width: 100%;

display: flex; /* for IE11 */

flex-wrap: wrap; /* for IE11 */

}

.panel > div > p {

flex: 100%; /* for IE11 */

}

Date 08.03.2018 User: Joe Doe

Some long text in the paragraph that is wider than the title above it

Another shorter text