Add ellipsis based on Media Screen Size

Question

So I'm stuck! I'm looking for any solution that is simple enough for a novice coder.

Currently I have the following code which adds an ellipsis to an echo

<?php echo ucwords($query->name = (strlen($query->name) > 15) ? substr($query->name,0,13).'...' : $query->name); ?>

This works just fine but I have it set on an iPhone 5 screen size to keep the text clean and not disrupt the screen layout. However, on a larger device this looks odd because there is extra space. So is there another way to make the ellipsis show depending on the screen size?

Thanks!

Answer 1

Just style the element that contains that output (without server-side truncation) with

overflow: hidden;
text-overflow: ellipsis;