让兄弟元素具有相同的宽度会破坏它们中的文本 [英] Making sibling elements take the same width breaks the text in them

问题描述

我试图设置div的宽度，它的内容是段落宽度 user-title 。这是HTML和CSS：

  .panel {margin-bottom：20px ;宽度：自动;显示：inline-flex; flex-direction：列; 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 class =panel > < p class =user-title>日期08.03.2018用户：Joe Doe< / p> < DIV> < p>段落中的一些长文本比上面的标题更宽< / p> < p>另一个较短的文字< / p> < / div>< / div>  

设置使元素的宽度为 user-title 元素，但文本分成多行。我怎样才能解决这个问题？
这是小提琴。

解决方案

如果我在这里没有完全弄错，使用CSS跨浏览器的唯一方法是将 display：inline-block with display：table-row / display：table-caption 。

堆栈片段

.panel {margin-bottom：20px;显示：inline-block; box-shadow：0 2px 4px 0＃C6C2BF; padding：0.5rem 1rem 1rem;}。user-title {display：table-row;}。panel> div {display：table-caption; < div class =

面板 > < p class =user-title>日期08.03.2018用户：Joe Doe< / p> < DIV> < p>段落中的一些长文本比上面的标题更宽< / p> < p>另一个较短的文字< / p> < / div>< / div>


$ b

---

如果你不关心IE，那么使用 width：0; min-width：100％; 在 .parent div 上。

请注意，我在Edge v.16，Firefox v.58和Chrome v.64上测试成功，但如果它在Safari上运行，我不能说。

堆栈片段

.panel { margin-bottom：20px;显示：inline-flex; flex-direction：列; box-shadow：0 2px 4px 0＃C6C2BF; padding：0.5rem 1rem 1rem;}。panel> div {width：0; min-width：100％;}

< div class = 面板 > < p class =user-title>日期08.03.2018用户：Joe Doe< / p> < DIV> < p>段落中的一些长文本比上面的标题更宽< / p> < p>另一个较短的文字< / p> < / div>< / div>


$ b

---

更新

经过一些反复试验，我在IE11和Edge / Firefox / Chrome

堆栈片段

  .panel {margin-bottom：20px;显示：inline-flex; flex-direction：列; box-shadow：0 2px 4px 0＃C6C2BF; padding：0.5rem 1rem 1rem;}。panel> div {width：0;最小宽度：100％;显示：flex; / * IE11 * / flex-wrap：wrap; / *用于IE11 * /}。panel> div> p {flex：100％; / *对于IE11 * /}  

< div class = 面板 > < p class =user-title>日期08.03.2018用户：Joe Doe< / p> < DIV> < p>段落中的一些长文本比上面的标题更宽< / p> < p>另一个较短的文字< / p> < / div>< / div>

I am trying to set the width of the div, and it's content to the width of the paragraph user-title in it. This is the HTML and 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 class="panel">
  <p class="user-title">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>

That kind of set up makes the elements take the width of the user-title element, but, the text breaks into multiple lines. How can I fix this? This is the fiddle.

解决方案

If I'm not totally mistaken here, the only way to make that work cross browsers using CSS is to combine display: inline-block with display: table-row/display: table-caption.

Stack snippet

.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 class="panel">
    <p class="user-title">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>

---

If you don't care about IE, then use width: 0; min-width: 100%; on the .parent div.

Note, I tested this with success on Edge v.16, Firefox v.58 and Chrome v.64, but if it works on Safari I can't say.

Stack snippet

.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 class="panel">
    <p class="user-title">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>

---

Updated

After some trial-and-error, I got this working on both IE11 and Edge/Firefox/Chrome

Stack snippet

.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 class="panel">
    <p class="user-title">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>

这篇关于让兄弟元素具有相同的宽度会破坏它们中的文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！