HTML TEXT in one line with space between-CodePudding

How can I write several words with large spacing under pictures in a line ? - HTML

Code:

<div >
<div >
    <img  src="/Bilder/Bild.JPG">
    <img  src=/Bilder/Bild2.JPG>
     <p>Hallo Enea</p>
    </div>
</div>

CodePudding user response：

With "pure" HTML you could just manually add spaces using the caractere " " which add a space for each one that you add, like this:

<div >
<div >
   <img  src="/Bilder/Bild.JPG">

   <p>My &nbsp; &nbsp; &nbsp; spaced &nbsp; &nbsp; &nbsp; &nbsp; words...</p>
   
   <img  src=/Bilder/Bild2.JPG>
    <p>Hallo Enea</p>
   </div>
</div>

A better way to do so if you are going to use a "even quantity of spaces" for all the text, is to use CSS instead of hard code it in HTML, so just add a class in the target elements and use the "word-spacing" property in CSS.

<div >
<div >
   <img  src="/Bilder/Bild.JPG">

   <p class='my_spaced_paragraphs'>My spaced words...</p>
   <p class='my_spaced_paragraphs'>Other spaced paragraph</p>
   
   <img  src=/Bilder/Bild2.JPG>
    <p>Hallo Enea</p>
   </div>
</div>

.my_spaced_pargraphs{
  word-spacing: 60px;
}

if wasn't exactly what you are looking for, please let me know.

CodePudding user response：

The &nbsp character entity used to denote a non-breaking space which is a fixed space. This may be perceived as twice the space of a normal space. It is used to create a space in a line that cannot be broken by word wrap.

The &ensp character entity used to denote an ‘en’ space which means half point size of the current font. This may be perceived as twice the space of a normal space.

The &emsp character entity used to denote an ’em’ space which means equal to the point size of the current font. This may be perceived as four times the space of a normal space.

Regular Space &nbsp;
Two space &ensp;
Four Space &emsp;

<p>This is a &nbsp; regular space.</p>
<p>This is a &ensp; two spaces gap.</p>
<p>This is a &emsp; four spaces gap.</p>

CodePudding user response：

Maybe put every word in spans that are flexboxes. That way you can control the words very nicely.

.wrap {
  display: flex;
  
  /* Visual help */
  border: 1px solid black;
  padding: 10px;
}
.wrap span {
  display: flex;
  flex-grow: 1;
  justify-content: start;
  
  /* Visual help */
  border: 1px solid red;
  padding: 5px;
}

<div >
  <span>Word</span>
  <span>Word</span>
  <span>Word</span>
  <span>Word</span>
</div>