New text line in span


I have a demo here -

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 -

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>

Why not simply:

.date span{
<p class="date">
  the date is <span> 12th December 2019</span>

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…

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.

<html lang="en">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
<style> time {display:block;}



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

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


Good thinking :slight_smile:

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