Question

0

76

Vistas

HTML - 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.

7 months ago · Santiago Gelvez

2 Respuestas

Responde la pregunta

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>

7 months ago · Santiago Gelvez Denunciar

Responde la pregunta

Encuentra empleos remotos

Accepted Answer · 2022-06-24T20:06:48.207Z

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>