Let's say I have a text and every letter is a span with display: inline-block;:
<div>
<span class="item">A</span>
<span class="item">A</span>
<span class="item">A</span>
<span class="item"> </span>
<span class="item">A</span>
<span class="item">B</span>
<span class="item">C</span>
<span class="item"> </span>
<span class="item">A</span>
<span class="item">B</span>
<span class="item">C</span>
<span class="item">D</span>
<span class="item">E</span>
<span class="item">F</span>
<span class="item"> </span>
<span class="item">A</span>
<span class="item">B</span>
</div>
.item {
display: inline-block;
font-size: 70px;
}
By default, if the screen is viewport is smaller it will break on any letter. I would like to break on spaces, but without removing the inline-block as I need it for something else
Here is a solution with the text inside div elements and the following CSS added:
#wrapper {
display: flex;
flex-wrap: wrap;
}
.text-wrapper {
display: flex;
}
Demo:
#wrapper {
display: flex;
flex-wrap: wrap;
}
.text-wrapper {
display: flex;
}
.item {
display: inline-block;
font-size: 70px;
}
<div id="wrapper">
<div class="text-wrapper">
<span class="item">A</span>
<span class="item">A</span>
<span class="item">A</span>
<span class="item"> </span>
</div>
<div class="text-wrapper">
<span class="item">A</span>
<span class="item">B</span>
<span class="item">C</span>
<span class="item"> </span>
</div>
<div class="text-wrapper">
<span class="item">A</span>
<span class="item">B</span>
<span class="item">C</span>
<span class="item">D</span>
<span class="item">E</span>
<span class="item">F</span>
<span class="item"> </span>
</div>
<div class="text-wrapper">
<span class="item">A</span>
<span class="item">B</span>
</div>
</div>
Related
For a website I have to display a div with multiple spans inside. Each one contains one character (with a specific colour class). When I use wraps of any kind, they don't recognize the text as whole and wrap on whitespace but rather on single characters (since it is for the computer only one input, that just fits this place)
See image:
It should wrap at "Dieses Maß wird in [WRAP] Zoll angegeben.
.colouredAnswer {
display: flex;
flex-wrap: wrap;
}
.green {
color: #008000;
white-space: pre-wrap;
font-size: 1.5em;
line-height: 1em;
}
<div class="colouredAnswer">
<span class="yellow-green">D</span>
<span class="green">i</span>
<span class="green">e</span>
<span class="yellow">s</span>
<span class="yellow-green">e</span>
<span class="yellow-green">s</span>
<span class="green"> </span>
<span class="green">M</span>
<span class="green">a</span>
<span class="green">ß</span>
<span class="green"> </span>
<span class="green">w</span>
<span class="green">i</span>
<span class="green">r</span>
<span class="yellow-green">d</span>
<span class="green"> </span>
<span class="green">i</span>
<span class="yellow-green">n</span>
<span class="green"> </span>
<span class="green">Z</span>
<span class="yellow-green">o</span>
<span class="green">l</span>
<span class="green">l</span>
<span class="green"> </span>
<span class="green">a</span>
<span class="green">n</span>
<span class="green">g</span>
<span class="green">e</span>
<span class="green">g</span>
<span class="green">e</span>
<span class="green">b</span>
<span class="green">e</span>
<span class="green">n</span>
<span class="green">.</span>
</div>
Try wrapping each word in a div:
.colouredAnswer {
display: flex;
flex-wrap: wrap;
}
.green {
color: #008000;
white-space: pre-wrap;
font-size: 1.5em;
line-height: 1em;
}
<div class="colouredAnswer">
<div>
<span class="yellow-green">D</span>
<span class="green">i</span>
<span class="green">e</span>
<span class="yellow">s</span>
<span class="yellow-green">e</span>
<span class="yellow-green">s</span>
</div>
<span class="green"> </span>
<div>
<span class="green">M</span>
<span class="green">a</span>
<span class="green">ß</span>
</div>
<span class="green"> </span>
<div>
<span class="green">w</span>
<span class="green">i</span>
<span class="green">r</span>
<span class="yellow-green">d</span></div>
<span class="green"> </span>
<div>
<span class="green">i</span>
<span class="yellow-green">n</span>
</div>
<span class="green"> </span>
<div>
<span class="green">Z</span>
<span class="yellow-green">o</span>
<span class="green">l</span>
<span class="green">l</span></div>
<span class="green"> </span>
<div>
<span class="green">a</span>
<span class="green">n</span>
<span class="green">g</span>
<span class="green">e</span>
<span class="green">g</span>
<span class="green">e</span>
<span class="green">b</span>
<span class="green">e</span>
<span class="green">n</span>
</div>
<span class="green">.</span>
</div>
I cannot find out why text1 does not center horizontally and why the icons do not appear (I have only a black point instead of blue icon and
circle).
<div id="texte_services">
text1
</div>
<div class="flex-container">
<div class="row">
<div class="column">
<p class="contenu">
<img src="../Images/screen.png" alt="screen">
</p>
</div>
</div>
<table>
<tr>
<td>
<div class="bullet">
</div>
<span class="blueText"><i class="fa fa-line-chart fa-lg"></i>
</span>
<span class="bluePoint">•
</span>
<span class="titleText">
</span>
</td>
<td>
<h3>UX design
</h3>
<p>text2
</p>
</td>
</tr>
<tr>
<td>
<div class="bullet">
</div>
<span class="blueText"><i class="fa fa-line-chart fa-lg"></i>
</span>
<span class="bluePoint">•
</span>
<span class="titleText">
</span>
</td>
<td>
<h3>UX design
</h3>
<p>text2
</p>
</td>
</tr>
<tr>
<td>
<div class="bullet">
</div>
<span class="blueText"><i class="fa fa-line-chart fa-lg"></i>
</span>
<span class="bluePoint">•
</span>
<span class="titleText">
</span>
</td>
<td>
<h3>UX design
</h3>
<p>text2
</p>
</td>
</tr>
</table>
</div>
CSS
#texte_services
{
display: flex;
flex-direction: row;
justify-content: center;
text-align: center;
}
article
{
margin-right: 20px;
flex: 3;
}
.ico_categorie
{
vertical-align: middle;
margin-right: 8px;
}
h3, p
{
margin: 20px;
}
#flex-container {
display: flex;
justify-content: center;
margin-top: -20px;
margin-bottom: 15px;
}
The reason is because you didnt include the link to font-awesome.min.css I just added it and everything works fine.
#texte_services
{
display: flex;
flex-direction: row;
justify-content: center;
text-align: center;
}
article
{
margin-right: 20px;
flex: 3;
}
.ico_categorie
{
vertical-align: middle;
margin-right: 8px;
}
h3, p
{
margin: 20px;
}
#flex-container {
display: flex;
justify-content: center;
margin-top: -20px;
margin-bottom: 15px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div id="texte_services">
text1
</div>
<div class="flex-container">
<div class="row">
<div class="column">
<p class="contenu">
<img src="../Images/screen.png" alt="screen">
</p>
</div>
</div>
<table>
<tr>
<td>
<div class="bullet">
</div>
<span class="blueText"><i class="fa fa-line-chart fa-lg"></i>
</span>
<span class="bluePoint">•
</span>
<span class="titleText">
</span>
</td>
<td>
<h3>UX design
</h3>
<p>text2
</p>
</td>
</tr>
<tr>
<td>
<div class="bullet">
</div>
<span class="blueText"><i class="fa fa-line-chart fa-lg"></i>
</span>
<span class="bluePoint">•
</span>
<span class="titleText">
</span>
</td>
<td>
<h3>UX design
</h3>
<p>text2
</p>
</td>
</tr>
<tr>
<td>
<div class="bullet">
</div>
<span class="blueText"><i class="fa fa-line-chart fa-lg"></i>
</span>
<span class="bluePoint">•
</span>
<span class="titleText">
</span>
</td>
<td>
<h3>UX design
</h3>
<p>text2
</p>
</td>
</tr>
</table>
</div>
I'm trying to figure out the best way to fix this problem. There are 4 divs, and when you shrink the browser window, the 3rd div appears on the right and the 4th div underneath. I know this is because the 1st div has more text, and an auto height means the height is larger than the other divs next to it. I don't want to give it a fixed height. Clearing the float on the 3rd div puts the 3rd div in the right place but the 4th div then sits below the 3rd div.
How can I make the 3rd and 4th divs sit next to each other when shrinking the browser window? And is there an easy way of making the 1st and 2nd divs the same height, even though the content is different in each div?
Thanks for the help!
.thing {
width: 50%;
height: auto;
background-color: pink;
box-sizing: border-box;
border: 1px solid red;
display: block;
float: left;
}
.title {
display: block;
}
a {
display: block;
}
<div class="thing">
<span class='title'>the excess text here causes the problem as the height is increased</span>
<a href='#'>News</a>
<a href='#'>Audacity</a>
<a href='#'>Thisisalongerword</a>
</div>
<div class="thing">
<span class='title'>title two</span>
<a href='#'>News</a>
<a href='#'>Audacity</a>
<a href='#'>Thisisalongerword</a>
</div>
<div class="thing thingy">
<span class='title'>title three</span>
<a href='#'>News</a>
<a href='#'>Audacity</a>
<a href='#'>Thisisalongerword</a>
</div>
<div class="thing">
<span class='title'>title four</span>
<a href='#'>News</a>
<a href='#'>Audacity</a>
<a href='#'>Thisisalongerword</a>
</div>
You can use clear:both on the third DIV:
.thing {
width: 50%;
height: auto;
background-color: pink;
box-sizing: border-box;
border: 1px solid red;
display: block;
float: left;
}
.title {
display: block;
}
a {
display: block;
}
.thing.thingy {
clear: both;
}
<div class="thing">
<span class='title'>the excess text here causes the problem as the height is increased</span>
<a href='#'>News</a>
<a href='#'>Audacity</a>
<a href='#'>Thisisalongerword</a>
</div>
<div class="thing">
<span class='title'>title two</span>
<a href='#'>News</a>
<a href='#'>Audacity</a>
<a href='#'>Thisisalongerword</a>
</div>
<div class="thing thingy">
<span class='title'>title three</span>
<a href='#'>News</a>
<a href='#'>Audacity</a>
<a href='#'>Thisisalongerword</a>
</div>
<div class="thing">
<span class='title'>title four</span>
<a href='#'>News</a>
<a href='#'>Audacity</a>
<a href='#'>Thisisalongerword</a>
</div>
About the second question: You can use flex to achieve that: Wrap a container around everything and apply display: flex; and flex-wrap: wrap; to it:
.thing {
width: 50%;
height: auto;
background-color: pink;
box-sizing: border-box;
border: 1px solid red;
display: block;
}
.title {
display: block;
}
a {
display: block;
}
.wrap {
display: flex;
flex-wrap: wrap;
}
<div class="wrap">
<div class="thing">
<span class='title'>the excess text here causes the problem as the height is increased</span>
<a href='#'>News</a>
<a href='#'>Audacity</a>
<a href='#'>Thisisalongerword</a>
</div>
<div class="thing">
<span class='title'>title two</span>
<a href='#'>News</a>
<a href='#'>Audacity</a>
<a href='#'>Thisisalongerword</a>
</div>
<div class="thing thingy">
<span class='title'>title three</span>
<a href='#'>News</a>
<a href='#'>Audacity</a>
<a href='#'>Thisisalongerword</a>
</div>
<div class="thing">
<span class='title'>title four</span>
<a href='#'>News</a>
<a href='#'>Audacity</a>
<a href='#'>Thisisalongerword</a>
</div>
</div>
Use flexbox.
You'll need to put the .things in a container and set it to display flex. Remove the float and you're done. Easy.
Its supported by basically every modern browser including IE10 and up and it easy to implement. See this excellent guide to flexbox for tips.
.container {
display: flex;
flex-wrap: wrap;
}
.thing {
width: 50%;
height: auto;
background-color: pink;
box-sizing: border-box;
border: 1px solid red;
display: block;
}
.title {
display: block;
}
a {
display: block;
}
<div class="container">
<div class="thing">
<span class='title'>the excess text here causes the problem as the height is increased</span>
<a href='#'>News</a>
<a href='#'>Audacity</a>
<a href='#'>Thisisalongerword</a>
</div>
<div class="thing">
<span class='title'>title two</span>
<a href='#'>News</a>
<a href='#'>Audacity</a>
<a href='#'>Thisisalongerword</a>
</div>
<div class="thing thingy">
<span class='title'>title three</span>
<a href='#'>News</a>
<a href='#'>Audacity</a>
<a href='#'>Thisisalongerword</a>
</div>
<div class="thing">
<span class='title'>title four</span>
<a href='#'>News</a>
<a href='#'>Audacity</a>
<a href='#'>Thisisalongerword</a>
</div>
</div>
I'm trying to achieve the following:
I'm using float:left to have a span containing the user name floating to the right of the big numbers to the left.
This is what I have so far: https://jsfiddle.net/d00ck/twcmfzo8/2/
body {
font-family: arial;
}
.container {
background-color: white;
padding-bottom: 15px width: 360px;
}
.position {
clear: both;
margin: 10px 0 10px 0;
padding: 0 10px 0 10px;
width: 100%;
}
.ranking-position {
font-size: 25px;
float: left;
}
.ranking-tier {
display: block;
}
.ranking-score {
clear: both;
}
<div class="container">
<div class="position">
<span class="ranking-position">1</span>
<span class="ranking-name">Dorothy Bradley</span>
<span class="ranking-tier">1rs Team All...</span>
<span class="ranking-score">1000pts</span>
</div>
<div class="position">
<span class="ranking-position">1</span>
<span class="ranking-name">User Name</span>
<span class="ranking-tier">1rs Team All...</span>
<span class="ranking-score">1000pts</span>
</div>
<div class="position">
<span class="ranking-position">1</span>
<span class="ranking-name">User Name</span>
<span class="ranking-tier">1rs Team All...</span>
<span class="ranking-score">1000pts</span>
</div>
</div>
I'm obviously missing something important since I can't seem to make the span containing the "1000pts" legend to float to the right of the big number. Any help would be greatly appreciated.
You just need to change
.ranking-tier {
display: block;
}
to this:
.ranking-name {
display: block;
}
Something like this:
HTML:
<div class="container">
<div class="position">
<span class="ranking-position">1</span>
<span class="ranking-name">Dorothy Bradley</span>
<span class="ranking-tier">1rs Team All...</span>
<span class="ranking-score">1000pts</span>
</div>
<div class="position">
<span class="ranking-position">1</span>
<span class="ranking-name">User Name</span>
<span class="ranking-tier">1rs Team All...</span>
<span class="ranking-score">1000pts</span>
</div>
<div class="position">
<span class="ranking-position">1</span>
<span class="ranking-name">User Name</span>
<span class="ranking-tier">1rs Team All...</span>
<span class="ranking-score">1000pts</span>
</div>
</div>
CSS:
body {
font-family: arial;
}
.container{
background-color: white;
padding-bottom: 15px
width: 360px;
}
.position {
clear: both;
margin: 10px 0 10px 0;
padding: 0 10px 0 10px;
width: 100%;
}
.ranking-position {
font-size: 25px;
float: left;
}
.ranking-score {
clear: both;
}
.ranking-name {
display:block;
}
https://jsfiddle.net/twcmfzo8/5/
First of all add a semicolon in the .container definition in CSS, after the padding-bottom. and add float:right; margin-top:-20px; in .ranking_score
Try this One:
<div class="position">
<div style="display:inline-block; float:left;">
<span class="ranking-position">1</span>
<span class="ranking-name">Dorothy Bradley</span>
<span class="ranking-tier">1rs Team All...</span>
</div>
<div style="float:right; display:inline-block;">
<span class="ranking-score" style="position:relative; top:20px;">1000pts</span>
</div>
</div>
That's because the float is not tall enough to affect the three spans. You can try forcing some height
.container {
font-family: arial;
}
.position {
overflow: hidden;
margin: 10px 0 10px 0;
padding: 0 10px 0 10px;
}
span {
display: block;
font-size: 16px;
line-height: 1.25em;
height: 1.25em;
}
.ranking-position {
font-size: 25px;
height: 60px; /* 16px * 1.25 * 3 */
float: left;
}
<div class="container">
<div class="position">
<span class="ranking-position">1</span>
<span class="ranking-name">Dorothy Bradley</span>
<span class="ranking-tier">1rs Team All...</span>
<span class="ranking-score">1000pts</span>
</div>
<div class="position">
<span class="ranking-position">1</span>
<span class="ranking-name">User Name</span>
<span class="ranking-tier">1rs Team All...</span>
<span class="ranking-score">1000pts</span>
</div>
<div class="position">
<span class="ranking-position">1</span>
<span class="ranking-name">User Name</span>
<span class="ranking-tier">1rs Team All...</span>
<span class="ranking-score">1000pts</span>
</div>
</div>
Or wrap them inside a flock formatting context root:
.container {
font-family: arial;
}
.position {
overflow: hidden;
margin: 10px 0 10px 0;
padding: 0 10px 0 10px;
}
.ranking-position {
font-size: 25px;
float: left;
}
.position > div {
overflow: hidden;
}
span {
display: block;
}
<div class="container">
<div class="position">
<span class="ranking-position">1</span>
<div>
<span class="ranking-name">Dorothy Bradley</span>
<span class="ranking-tier">1rs Team All...</span>
<span class="ranking-score">1000pts</span>
</div>
</div>
<div class="position">
<span class="ranking-position">1</span>
<div>
<span class="ranking-name">User Name</span>
<span class="ranking-tier">1rs Team All...</span>
<span class="ranking-score">1000pts</span>
</div>
</div>
<div class="position">
<span class="ranking-position">1</span>
<div>
<span class="ranking-name">User Name</span>
<span class="ranking-tier">1rs Team All...</span>
<span class="ranking-score">1000pts</span>
</div>
</div>
</div>
I have tried a lot things but not able to get desired format.
HTML:
<div class="usertype">
<div class="type1">
<span class="type-heading">type1 is here</span>
<span class="type-description">10 types have joined</span>
<span class="type-description">35 type will.</span>
</div>
<div class="type2">
<span class="type-heading">type2 is here</span>
<span class="type-description">10 types are there</span>
<span class="type-description">35 type will.</span>
</div>
<div class="type1">
<span class="type-heading">type23 is good</span>
<span class="type-description">50 types are there</span>
<span class="type-description">50 types are there</span>
<span class="type-description">for 2 months</span>
</div>
<div class="type2">
<span class="type-heading">Type4 at last</span>
<span class="type-description">50 types are there</span>
<span class="type-description">makes their first $20</span>
<span class="type-description">50 types are there</span>
<span class="type-description">35 type will.</span>
</div>
</div>
CSS:
div.usertype {
margin-top: 1em;
}
div.type1 {
float: left;
margin-left: 2em;
}
span.type-heading {
font-size: 14px;
color: #f7f7f7;
}
span.type-description {
font-size: 14px;
color:#959595;
display: block;
}
Output:
What I want:
Decrease the vertical distance between spans with class type-description. I tried using line-height and padding-bottom but could not move it. May be some parent div has display:block.
All type description aligned to left which are now center. If I use it float: left, it ruins the format completely.
Please help.
<div class="usertype">
<div class="type1">
<span class="type-heading">type1 is here</span>
<span class="type-description">10 types have joined</span>
<span class="type-description">35 type will.</span>
</div>
<div class="type2">
<span class="type-heading">type2 is here</span>
<span class="type-description">10 types are there</span>
<span class="type-description">35 type will.</span>
</div>
<div class="type1">
<span class="type-heading">type23 is good</span>
<span class="type-description">50 types are there</span>
<span class="type-description">50 types are there</span>
<span class="type-description">for 2 months</span>
</div>
<div class="type2">
<span class="type-heading">Type4 at last</span>
<span class="type-description">50 types are there</span>
<span class="type-description">makes their first $20</span>
<span class="type-description">50 types are there</span>
<span class="type-description">35 type will.</span>
</div>
</div>
<style>
div.usertype {
margin-top: 1em;
}
div.type1 {
float: left;
margin-left: 2em;
}
div.type2 {
float: left;
margin-left: 2em;
}
span.type-heading {
font-size: 14px;
color: #f7f7f7;
}
span.type-description {
font-size: 14px;
color:#959595;
display: block;
line-height:15px;
}
</style>