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

概述我试图设置div的宽度,它的内容是段落user-title的宽度.这是 HTML和CSS： .panel { margin-bottom: 20px; width: auto; display: inline-flex; flex-direction: column; box-shadow: 0 2px 4px 0 #C6C2BF; padding: 0.5rem 1rem 我试图设置div的宽度,它的内容是段落user-Title的宽度.这是 HTML和CSS：

.panel {  margin-bottom: 20px;  wIDth: auto;  display: inline-flex;  flex-direction: column;  Box-shadow: 0 2px 4px 0 #C6C2BF;  padding: 0.5rem 1rem 1rem;}.user-Title {  display: flex;}.panel>div {  display: flex;  flex-direction: column;}.panel>div>p {  display: flex;  flex-grow: 1;  wIDth: 0;}

<div >  <p >Date 08.03.2018 User: Joe Doe</p>  <div>    <p>Some long text in the paragraph that is wIDer than the Title above it</p>    <p>Another shorter text</p>  </div></div>

这种设置使元素占用用户标题元素的宽度,但是,文本分成多行.我怎样才能解决这个问题？
这是fiddle.

解决方法 如果我在这里没有完全弄错,那么使用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;}

<div >    <p >Date 08.03.2018 User: Joe Doe</p>    <div>      <p>Some long text in the paragraph that is wIDer than the Title above it</p>      <p>Another shorter text</p>    </div></div>

如果你不关心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%;}

<div >    <p >Date 08.03.2018 User: Joe Doe</p>    <div>      <p>Some long text in the paragraph that is wIDer than the Title above it</p>      <p>Another shorter text</p>    </div></div>

更新

经过一些反复试验,我在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  */}

<div >    <p >Date 08.03.2018 User: Joe Doe</p>    <div>      <p>Some long text in the paragraph that is wIDer than the Title above it</p>      <p>Another shorter text</p>    </div></div>

总结

以上是内存溢出为你收集整理的html – 使兄弟元素采用相同的宽度打破其中的文本全部内容，希望文章能够帮你解决html – 使兄弟元素采用相同的宽度打破其中的文本所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。