0
144
VistasHTML - Text besides div in a line when spaces added
I have html -
https://jsfiddle.net/nko8p6fr/
It can be seen that , in the text - very long text ; there are 2 spaces.
I want long and text to bring in one line.
First line should contain only one word , rest all words in second line.
Something like this -
How can I achieve it?
<div style='padding:12'>
<div style='background-color:red;display:inline-block;height:2.5rem;width:2.5rem;float:left;'>
<span style='vertical-align:middle;float:left;color:black;font-weight:bold;margin-left:20%;margin-top:15%'>7</span><div style='color:black;margin-left:140%;margin-top:3%;vertical-align:middle;width:50%'>very long text</div></div><br><br><br><br>
Note :- These number of <br> are necessary for further blocks to get added and to keep space between them.
2 Respuestas
Responde la pregunta0
I will share you my hack.
I use between two words that I always want to be together
so in very long text you can write very long text.
stands for non-break space.
Lastly, I would suggest you stick to semantic HTML, the habit will prove very helpful in future and there is always a way without compromising on semantics.
For eg, give class for margin at bottom to give gap between div(s) and eliminate <br>
0
Maybe Change the approach on how you build the code. there's lot of useful css properties like grid or flexbox. here's the example using flex
.c1 {
border: 1px solid red;
display: flex;
align-items: center;
gap: 10px;
}
.c2 {
background: red;
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
}
.c3 span {
display: block;
border: 1px solid green;
}<div style='padding:12;'>
<div style='background-color:red;display:inline-block;height:2.5rem;width:2.5rem;float:left;'>
<span style='vertical-align:middle;float:left;color:black;font-weight:bold;margin-left:20%;margin-top:15%'>7</span>
<div style='color:black;margin-left:140%;margin-top:3%;vertical-align:middle;width:100%;'>
<span class="break">very</span>
long text
</div>
</div>
<br><br><br><br>
<div class="c1">
<div class="c2">
7
</div>
<div class="c3">
<span>very</span>
long text
</div>
</div>