New text line in span

Hi

I have a demo here - https://codepen.io/anon/pen/bzbQJB

Is it possible to have a new line of text in a span where the top line is shorter than the bottom, I also need it right aligned but I think thats easy.

I have it working in the second example in the demo but its two p tags in a div can I do that in a span

Sorry I have it working here with a <br> but isn’t working on my page, I’ll investigate

here - https://codepen.io/anon/pen/aXoPoP

You can add a line break via css

.wrap span::before {
  content: "\A";
}
.wrap { text-align: right;}
<div class="wrap">the date is <span>12th December 2019</span>
</div>

Why not simply:

.date{
  margin:0;
  text-align:right;
  width:13rem;
}
.date span{
  display:block;
}
<p class="date">
  the date is <span> 12th December 2019</span>
</p>

I was going to originally suggest exactly that. I just wondered if there was a different way to approach it, hence the suggestion I made. Both achieve the same end result…

Rather than using a generic span I would also consider using the <time> element as that is it’s purpose.

The datetime attribute is optional but helps…

datetime
This element is for presenting dates and times in a machine readable format. For example, this can help a user agent offer to add an event to a user’s calendar.

<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Time</title>
<style>
p.date time {display:block;}

</style>

</head>
<body>

<p class="date">
  the date is <time datetime="2019-12-12">December 12, 2019</time>
</p>

<p class="date">
  the date is <time>December 12, 2019</time>
</p>

</body>
</html>
5 Likes

Good thinking :slight_smile:

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