Wie schrumpfe ich ein Flex-Element um eine Textumbruchspanne?

Ich bin mir nicht einmal sicher, ob dies möglich ist, ich versuche herauszufinden, ob ich ein Flex-Element um einen Bereich, der in Text verpackt ist, verkleinern kann.Wie schrumpfe ich ein Flex-Element um eine Textumbruchspanne?

Hier bin ich jetzt, wenn Sie in die zweite Zeile schauen, versuche ich Whitespace auf der rechten Seite des Textes zu beseitigen.

body { 
 
    height: 75%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
body > div { 
 
    min-height: 55px; 
 
    display: -webkit-box; 
 
    display: -webkit-flex; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -webkit-box-orient: horizontal; 
 
    -webkit-box-direction: normal; 
 
    -webkit-flex-direction: row; 
 
     -ms-flex-direction: row; 
 
      flex-direction: row; 
 
    border-bottom: 1px solid black; 
 
    width: 225px; 
 
} 
 
body > div > div { 
 
    -webkit-box-flex: 1; 
 
    -webkit-flex: 1 1 auto; 
 
     -ms-flex: 1 1 auto; 
 
      flex: 1 1 auto; 
 
    border-right: 1px solid black; 
 
} 
 
body > div > div span { 
 
    font-size: 21px; 
 
} 
 
body > div > div:nth-child(1) { 
 
    -webkit-box-flex: 0; 
 
    -webkit-flex: 0 1 auto; 
 
     -ms-flex: 0 1 auto; 
 
      flex: 0 1 auto; 
 
}

<div> 
 
    <div><span>Some text regular</span></div> 
 
    <div></div> 
 
</div> 
 
<div> 
 
    <div><span>howdoishrinkthis flexitemtotext</span></div> 
 
    <div></div> 
 
</div> 
 
<div> 
 
    <div><span>Some text regular</span></div> 
 
    <div></div> 
 
</div>

Quelle

2016-01-06 Blenderer

Do Sie möchten die Schriftgröße verkleinern? Ich bin mir nicht sicher, ob ich verstehe, was Sie tun möchten –

Ich bin mir nicht sicher, ob das mit reinem CSS möglich ist. Dies kann Ihnen helfen: http://stackoverflow.com/q/25808069/3597276 –

Wenn Sie die Spannweite innerhalb der "howdoishrinkthis flexitemtotext" überprüfen, hat es eine kleinere Breite als das Flex-Element. Im Wesentlichen möchte ich das bündig gegen den Text auf der linken Seite sein. – Blenderer

Durch die flex-basis auf Null setzen, werden Sie ein flexibles Element auf seine minimale Größe schrumpfen. So wird es zum Text passen, aber es zwingen Sie Ihren Text auch zu wickeln:

body > div { 
 
    min-height: 55px; 
 
    display: -webkit-box; 
 
    display: -webkit-flex; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -webkit-box-orient: horizontal; 
 
    -webkit-box-direction: normal; 
 
    -webkit-flex-direction: row; 
 
     -ms-flex-direction: row; 
 
      flex-direction: row; 
 
    border-bottom: 1px solid black; 
 
    width: 225px; 
 
} 
 
body > div > div { 
 
    -webkit-box-flex: 1; 
 
    -webkit-flex: 1 1 auto; 
 
     -ms-flex: 1 1 auto; 
 
      flex: 1 1 auto; 
 
    border-right: 1px solid black; 
 
} 
 
body > div > div span { 
 
    font-size: 21px; 
 
} 
 
body > div > div:nth-child(1) { 
 
    -webkit-box-flex: 0; 
 
    -webkit-flex: 0 1 0; 
 
     -ms-flex: 0 1 0; 
 
      flex: 0 1 0; 
 
}

<div> 
 
    <div><span>Some text regular</span></div> 
 
    <div></div> 
 
</div> 
 
<div> 
 
    <div><span>howdoishrinkthis flexitemtotext</span></div> 
 
    <div></div> 
 
</div>

Quelle

2016-01-22 10:29:04 tzi

Diese Lösung scheint nur auf neueren Versionen von Chrome zu funktionieren. – Blenderer

Die Lösung unten ist nicht perfekt, aber es den Flex Artikel nicht zieht bis zu dem Text auch für lange Wörter. Dies wird erreicht durch:

den Text Container Floating (die span)
lange Worte brechen (und sie in Browsern Silbentrennung, die hyphenation unterstützen)

body { 
 
    height: 75%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
body > div { 
 
    min-height: 55px; 
 
    display: -webkit-box; 
 
    display: -webkit-flex; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -webkit-box-orient: horizontal; 
 
    -webkit-box-direction: normal; 
 
    -webkit-flex-direction: row; 
 
     -ms-flex-direction: row; 
 
      flex-direction: row; 
 
    border-bottom: 1px solid black; 
 
    width: 225px; 
 
} 
 
body > div > div { 
 
    -webkit-box-flex: 1; 
 
    -webkit-flex: 1 1 auto; 
 
     -ms-flex: 1 1 auto; 
 
      flex: 1 1 auto; 
 
    border-right: 1px solid black; 
 
} 
 
body > div > div span { 
 
    float: left; 
 
    font-size: 21px; 
 
    overflow-wrap: break-word; 
 
    word-wrap: break-word; 
 

 
    -ms-word-break: break-all; 
 
    word-break: break-word; 
 

 
    -ms-hyphens: auto; 
 
    -moz-hyphens: auto; 
 
    -webkit-hyphens: auto; 
 
    hyphens: auto; 
 
} 
 
body > div > div:nth-child(1) { 
 
    -webkit-box-flex: 0; 
 
    -webkit-flex: 0 1 auto; 
 
     -ms-flex: 0 1 auto; 
 
      flex: 0 1 auto; 
 
}

<div> 
 
    <div><span>Some text regular</span></div> 
 
    <div></div> 
 
</div> 
 
<div> 
 
    <div><span>howdoishrinkthis flexitemtotextevenlonger and more and more and mroe text</span></div> 
 
    <div></div> 
 
</div> 
 
<div> 
 
    <div><span>Some text regular asdf asdf</span></div> 
 
    <div></div> 
 
</div>

Quelle

2016-01-27 06:16:51

Wie schrumpfe ich ein Flex-Element um eine Textumbruchspanne?

Antwort

Verwandte Themen