How to wrap text without spaces between lines

HTML & CSS
1

I’d like this text to wrap (kind of stack), but the <br> creates too much horizontal space between the lines of text. Can you suggest something else?

<div class="container text-left">
<span>just want<br></span>
<span>these words<br></span>
<span>to line up vertical</span>
</div>

thanks

2

What CSS do you have?

3

Answer:

just want
<br>these words
<br>to line up vertical.
4

Try adding the following style:

<div class="XXXcontainer XXXtext-left" style="display:inline-block; background-color:cyan;">
<span>just want<br></span>
<span>these words<br></span>
<span>to line up vertical</span>
</div>

If that works search for “inline-block” without quotes in the CSS files and replace the style with the relevant CSS name.

Edit:
I would also try removing the span tags and and see what difference they made.

1 Like
5

Your posted text lines are rendered with a line-height according to the browser default CSS. To suggest something else would be to override the browser default with your own CSS.

As a rule of thumb, upper case letters (that seldom have descending parts) usually takes 80% of the line-height, so if you want to stack text-lines with no space you could try line-height: 0.8;.

Lower case letters eventually has a descending part that will poke into the line below at that line-height, but eventual overlap doesn’t disturb much, IMHO, even when the character below overlap or touch the descendant.

A line-height lesser than 0.8 will make lines overlap. Try it out.

3 Likes
6

I’m guilty of having misused <br> tags to control display in the past. But now intentionally misusing it feels quick and dirty. Might not using 'display: table-cell` be more semantic?

1 Like
7

Hi there ChrisjChrisj,

does this help…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">
body {
    background-color: #f9f9f9;
    font: 100% / 162% verdana, arial, helvetica, sans-serif;
 }

.container > span {
    display: block;
    line-height: 1em; /* adjust value to suit */
 }
</style>

</head>
<body> 

 <div class="container">
  <span>just want</span>
  <span>these words</span>
  <span>to line up vertical</span>
 </div>

</body>
</html>

coothead

2 Likes
8

You can also make use of the <pre> tag along with some CSS to re-style it from it’s default. One must be careful using it’s default white-space:pre; as that will include all white-space in the html formatting.

And you could use a span with some white-space styling to make it similar to a pre tag.

<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Preformat Text</title>
<style>
pre.styled {
  display: inline-block;
  font-family: inherit;
  white-space: pre-line;
  margin: 1em 0;
  padding:0 1em;
  background: yellow;
}

span.preformat {
  display: inline-block;
  white-space: pre-line;
  margin: 1em 0;
  padding:0 1em;
  background: #EEE;
}

</style>

</head>
<body>

<p>Using a pre tag with pre-line, no concerns with erroneous white space in html.</p>

<pre class="styled">
  styled pre tag
  just want
  these words
  to line up vertical.
</pre>

<p>Default pre tag with white-space: pre, includes erroneous white space in html.</p>

  <pre>
    default pre tag
      just want
  these words
    to line up vertical.
  </pre>

<p>Using a span with pre-line, first line of text starting on same line as tag</p>

<span class="preformat">styled span
  just want
  these words
  to line up vertical.
</span>

<p>Using a span with pre-line, erroneous white space removed from html but shows space when first line starts below tag.</p>

  <span class="preformat">
    styled span
    just want
      these words
    to line up vertical.
  </span>

</body>
</html>
1 Like
9

Similar to Mr. C and Ray.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="css/stylesheet.css">
    <title>words in column</title>
<!--
https://www.sitepoint.com/community/t/how-to-wrap-text-without-spaces-between-lines/313719
ChrisjChrisj
-->
    <style>
span {
    display:block;
    text-align:center;  /* optional */
}
.preline {
    white-space:pre;
    text-align:center;  /* optional */
}
    </style>
</head>
<body>

<div>
    <span>just want</span>
    <span>these words</span>
    <span>to line up vertical</span>
</div>

<div class="preline">just want
these words
to line up vertical
</div>

</body>
</html>
11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.