I have an HTML code on inspect (as shown below) in which I want to left justify and right justify time element content in css.
HTML Code (On inspect):
<time datetime="00:15 02-08-2019" style="width:194px;"
data-timezone="et">August 2 00:15</time>
The above inspect is generated from the following php code:
Php code:
<time style="width:194px;" datetime="<?php echo esc_attr(date_format($ts, 'H:i d-m-Y'))
?>"data-timezone="<?php echo esc_attr($tz_param) ?>"><?php
echo ucfirst(date_i18n( 'j F &\nb\sp; &\nb\sp; H:i',
$ts->getTimeStamp()-(60*60*4))); ?></time>`
The above inspect html code belongs to the following screenshot:
Problem Statement:
I am wondering what CSS code I need to add so that I can left justify August 2
(which is already there) and right justify 00:15
.
New answer
based on your new update and since you have control over the PHP code, you can simply split the date like below:
<time style="width:194px;" datetime="<?php echo esc_attr(date_format($ts, 'H:i d-m-Y'))
?>"data-timezone="<?php echo esc_attr($tz_param) ?>"><?php
echo ucfirst(date_i18n( 'j F',
$ts->getTimeStamp()-(60*60*4))).'<span>'.date_i18n( 'H:i',
$ts->getTimeStamp()-(60*60*4)).'</span>'; ?></time>`
And this will produce the following output:
time {
display:inline-block;
}
time span {
float:right;
}
<time datetime="00:15 02-08-2019" style="width:194px;" data-timezone="et">August 2<span>00:15</span></time>
Old answer
You can simulate this using word-spacing
but you need to insert a special space between august
and 2
called a fixed width space that doesn't get affected by word-spacing
time {
border:1px solid;
display:block;
width:300px;
word-spacing:190px;
}
<time datetime="00:15 02-08-2019" data-timezone="et">August 2 00:15</time>
<time datetime="00:15 02-08-2019" data-timezone="et">August 2 00:15</time>
Word spacing algorithms are user agent-dependent. Word spacing is also influenced by justification (see the 'text-align' property). Word spacing affects each space (U+0020) and non-breaking space (U+00A0), left in the text after the white space processing rules have been applied. The effect of the property on other word-separator characters is undefined. However general punctuation, characters with zero advance width (such as the zero with space U+200B) and fixed-width spaces (such as U+3000 and U+2000 through U+200A) are not affected. ref
List of the spaces: http://jkorpela.fi/chars/spaces.html
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With