Thoughts on truncating text?

[csdude55]

I have a text field that shows a date, like:

Wednesday, January 10, 2024

It looks good on desktop, but on mobile it can be a tad long and mess up the page. It would help a lot if I could show "Wednesday" and "January" on desktop, and "Wed" and "Jan" on mobile!

I'm sure that I could handle this in JavaScript, but before I do that I'm curious if CSS has a way around it?

This works if I just assume a fixed width:

<div style="display: flex">
 <div style="display: block; width: 29px; overflow: hidden; white-space:nowrap">Wednesday</div>
 <div>, January 10, 2024</div>
</div>

but since "Mon" and "Wed" may not be the exact same I don't know that it's the BEST option.

[not2easy]

I don't suppose you would consider using numbers instead of words so it would be like "01-10-2024" because Thursday looks like Thui with the cutoff in pixels. Letters aren't all the same width so it is not a great way to handle an artificial abbreviation.

Easier, something like

<?php echo "Date: ".date("m-d-Y"); ?>

for Date: 01-10-2024 ?

[csdude55]

Mmm, I'm not really a fan of that for this particular location :-/

The live page has an array of dates created in PHP and shows the first one on the page, and then unhides a block element to show the remainder. The hard path would be to create an array that's mobile friendly and a second one for desktop, then just hide or show the appropriate block. But in this script that's going to be WAY more complex than it sounds! LOL So I'd really rather not have to do that, but if CSS can't do it then I might not have a choice.

The only CSS solution I can find is text-overflow, but that only works to add ... after a fixed width so I can still end up with, for example, Thui...

[lucy24]

numbers instead of words so it would be like "01-10-2024"

That could be perilous, unless you're absolutely certain all users of the site live in the same region, using the same date format. Is it the tenth of January, or the first of October?

As long as you're in php [php.net], you could pull both forms of each string--D vs. l (ell) for day of the week, F vs. M for month-- like

<span class = "abbrev">Thu</span><span class = "full">Thursday</span> 11 <span class = "abbrev">Jan</span><span class = "full">January</span> 2024

and then deploy @media rules to display one or the other. (My choice would be to set one as the default, and then toggle the display:hidden for the other viewport size.)

Incidentally, setting a text element's width in pixels seems a bit unkind to readers who need to use a larger-than-standard font size.

[londrum]

if it was me i probably just dump 'Wednesday' completely on mobile, wrap it in a span or something and hide it. because the day of the week is just an extra piece of information that they don't really need to know the date

[Martin Potter]

I live in a country that lies between "two different worlds". Please use ISO-8601 format for all dates. Thanks!

[Fotiman]

How about something like this:

<div class="datestamp">
 <span class="abbreviation">Wed</span><span>nesday</span>,
 January 10, 2024
</div>

@media (max-width: 640px) {
 .datestamp > span:not(.abbreviation) {
  display: none;
 }
}

On small screens (up to 640px), the end of the word would be hidden, and on larger screens the rest of the word would be displayed.

[lucy24]

Ooh, I forgot about the :not selector. But why can't it simply be

Wed<span class = "longer">nesday</span>

and in the @media rule

span.longer {display: none;}

?

This is assuming all the text strings are entered manually, rather than pulled directly from a php lookup.

[Fotiman]

It could be that, but I was thinking from a semantic perspective, it makes sense to mark the abbreviation portion (I don't think there's a semantic word for the rest of it, and "longer" just feels icky).

[tangor]

One could also use the two letter versions of days of the week:

Su Mo Tu We Th Fr Sa

[lucy24]

csdude, are you just going to sit there munching popcorn while the rest of us get into it?

[csdude55]

csdude, are you just going to sit there munching popcorn while the rest of us get into it?

Lil' bit :-) LOL

I'm truly enjoying the different ideas, but honestly, none of it really works for me. You see, I learned a long time ago that a significant portion of my audience are extremely computer illiterate **, so I go to great lengths to make things as dummy-proof as possible. And in this case, that means that I really need the day of the week on the page.

But it also means that SOME people will see "Thu" and honestly think that it means Tuesday. Or April. Or Pluto. Or God only knows what. And I truly don't know whether some of them will see 1-10-24 and understand what I means. And I say that with honest-to-God first hand experience! So I really want to show the full day when possible, and abbreviate it as a last resort.

With no pure CSS solution then @Fotiman's suggestion is great, but I'd have to use substr() or something in PHP to find the 3rd character and then explode or something to find the first comma. As an alternative, I'm thinking about blending your (@lucy24) suggestion and @Fotiman's with something like:

$weekdays = [
 'Mon' => 'Monday',
 'Tue' => 'Tuesday',
 'Wed' => 'Wednesday',
 ...
];

// use date() to get a string like this
$date = 'Wed, January 10, 2024';

// result looks like this
// <span class='short'>Wed</span><span class='long'>Wednesday</span>, January 10, 2024
$newDate = preg_replace_callback('#^(...)#', function ($matches) {
 global $weekdays;
 return "<span class='short'>" . $matches[1] . "</span><span class='long'>" . $weekdays[$matches[1]] . "</span>";
}, $date);

and then use CSS to show "short" or "long" based on the size of the viewport.


** I received a message on Facebook just last week that looks like this:

User: for cell (note, they meant "for sale")

Me (auto reply):
Thanks for reaching out! We do not check Facebook for messages, but you can email us at [e-mail]

You can find the classifieds here:
www.example.com/classifieds

User: classifieds

User: Classifieds

User: for cell classifieds

User: for sell classifieds

User: for sale classifieds

User: google classifieds

User: google example classifieds

That went on with 14 more lines like that, with them literally typing what they wanted and sending it as a message on Facebook, instead of going to the site. And I'm sure they never actually made it to my site.

FWIW, the user look to be in her late 20s / early 30s.

[tangor]

Do 20 year olds worry about days of the week other than Friday and Saturday?

Meanwhile, the inventiveness of human-powered typos never ceases to amuse me. One can only anticipate so much!

[csdude55]

I only mentioned her age because, well, I'm never shocked when a 70 year old has those types of problems. My area has always focused on unskilled labor jobs, so many older people are high school dropouts and simply never tried to learn anything beyond their job. But a 30 year old grew up with the internet! So that level of illiteracy always amazes me.

Wanna hear the story of my trying to explain to my 20-ish year old nephew just how to create an account on my site? Spoiler: it was not easy.

[tangor]

Wanna hear the story of my trying to explain to my 20-ish year old nephew just how to create an account on my site? Spoiler: it was not easy.

Not really. I did finish high school, but was never illiterate. Being dumb is a choice, or laziness...