使同级元素具有相同的宽度会破坏其中的文本 [英] Making sibling elements take the same width breaks the text in them

问题描述

我正在尝试设置 div 的宽度，并将其内容设置为其中 user-title 段落的宽度.这是 HTML 和 CSS:

.panel {底边距:20px；宽度:自动；显示:inline-flex；弹性方向:列；框阴影:0 2px 4px 0 #C6C2BF；填充:0.5rem 1rem 1rem；}.user-title {显示:弹性；}.panel>div {显示:弹性；弹性方向:列；}.panel>div>p {显示:弹性；弹性增长:1；宽度:0；}

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

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

解决方案

如果我在这里没有完全弄错的话，使用 CSS 使其跨浏览器工作的唯一方法是结合 display: inline-block with display: table-row/display: table-caption.

堆栈片段

.panel {底边距:20px；显示:内联块；框阴影:0 2px 4px 0 #C6C2BF；填充:0.5rem 1rem 1rem；}.user-title {显示:表格行；}.面板>div {显示:表格标题；字幕侧:底部；}

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

<小时>

如果你不关心IE，那就用width: 0;min-width: 100%; 在 .parent div 上.

注意，我在 Edge v.16、Firefox v.58 和 Chrome v.64 上测试成功，但如果它适用于 Safari，我不能说.

堆栈片段

.panel {底边距:20px；显示:inline-flex；弹性方向:列；框阴影:0 2px 4px 0 #C6C2BF；填充:0.5rem 1rem 1rem；}.面板>div {宽度:0；最小宽度:100%；}

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

<小时>

更新

经过反复试验，我在 IE11 和 Edge/Firefox/Chrome 上都可以使用

堆栈片段

.panel {底边距:20px；显示:inline-flex；弹性方向:列；框阴影:0 2px 4px 0 #C6C2BF；填充:0.5rem 1rem 1rem；}.面板>div {宽度:0；最小宽度:100%；显示:弹性；/* IE11 */flex-wrap: 包裹;/* IE11 */}.面板>div >p{弹性:100%；/* IE11 */}

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

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屋！