Switching php character limit for responsive media queries

Question

I have a responsive site that has php character limits on certain blocks of text. The limit varies depending whether it's desktop, tablet or mobile but I'm struggling to switch this limit depending on the device/size.

This is the php code I'm using to limit the text:

<?php 
ob_start();
the_content();
$old_content = ob_get_clean();
$new_content = strip_tags($old_content);            

if(strlen($new_content) > 400) {     
    echo substr($new_content,0,400) . "..."; 
} else {
    echo substr($new_content,0,400); 
} ?>

How can I switch this limit in relation to the media queries that make the site responsive? As far as I know it can't be done with css can it?

CSS attempt:

p.tester {
    white-space: nowrap;
    width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height:300px;
}

At the moment, that limits it to one line, is it possible to show 5 lines?

How are you checking whether it is desktop, tablet or mobile in PHP? Or do I misunderstand your question? — putvande, Aug 13 '13 at 09:40
The substr in your `else{}` is useless, the check you just performed means it is always 400 characters or smaller, the `substr` never actually does something and is using overhead which is never used. I've suggested an edit — Martijn, Aug 13 '13 at 09:45

Martijn · Accepted Answer · 2013-08-13T09:50:15.270

2

You can not. PHP is serverside, and the server does not know what the resolution of the screen is without any help.

You could add and AJAX-call that tell PHP the size of the screen and load the new text php gives you

An easier way (I dont recommand the ajax one) could be this:

<div id="AlwaysShowThis"> text upto 400 characters </div>
<div id="showIfMedium"> show text characters 401 till 600</div>
<div id="ShowIfbig"> show text from character 601 and up</div>

And control those via mediaqueries in css

Another method is text-overflow as suggested in other comments (i'm going to add this for a complete answer)

elem{
    text-overflow: ellipsis;
}

This will take the size available and add the dots at the end. A bit more flexible if your responsive is very responsive (e.g. 400px works, and 410px also works, the 2nd one would allow a few more characters)

edited Aug 13 '13 at 09:50

answered Aug 13 '13 at 09:40

Martijn

15,791
4
36
68

Is it possible to do the css method over say 5 lines. At the moment it works but only for one line of text. – Rob Aug 13 '13 at 09:57
Give the element a `min-height`? – Martijn Aug 13 '13 at 10:00
Hmm, that didn't seem to help, it just left it as one line. (Updated my question with what I did). – Rob Aug 13 '13 at 10:05
What if you remove the no-wrap? Not really sure why you would need that, but I could be wrong – Martijn Aug 13 '13 at 10:06
Without the no-wrap it doesn't limit the content at all. I'll setup a fiddle to test now. – Rob Aug 13 '13 at 10:13

score 0 · Answer 2 · answered Aug 13 '13 at 09:47

You can't do this directly with PHP.

A responsive site is not just responsive based on the size of the browser window, it also responds dynamically based on changes to the size of browser window while the page is visible.

The classic example of this is if a tablet user turns his device from portrait to landscape orientation; a responsive site will automatically adjust as he does so. But the same effect would be used for a normal desktop user simply resizing his browser window using the mouse.

This is not something that can be done with PHP because the page does not reload when this is done. PHP only serves the inital content, so any dynamic resizing needs to be done entirely by the browser.

CSS Media queries are the main tool for this, which tell the browser to use different CSS styles according to the page size. You would use this for example to set the widths of your page elements dynamically. You can also use media queries to set certain elements to be displayed or hidden according to the page size; for example, on a wide page layout, you could show the bigger text box, and on a smaller layout, only show the box containing the reduced text -- any CSS code can be included in a media query.

Find out more about media queries and how to use them here: http://css-tricks.com/css-media-queries/

Note that media queries are not supported by old browsers like IE8, so if you use them, it is a good idea to set sensible default values.

Alternatively, simple percentage based sizing can also work in many cases, and you may not even need media queries.

CSS can also do your ... effect without any intervention from PHP:

text-overflow: ellipsis;

This style adds a ... to the end of any text that is truncated because its box is too small and the content is hidden.

In order for the ellipsis to work, you also need to specify overflow:hidden and white-space: nowrap.

Hope that helps.

The CSS method you suggest works on one line but not across several lines. Is it possible to do it over 5 lines of text? — Rob, Aug 13 '13 at 09:56
@Rob: no, not in CSS currently, sadly. You could truncate it using Javascript though; that might be an option to keep the functionality in the browser. — Spudley, Aug 13 '13 at 10:13
Here's someone who's tried to hack it: http://www.mobify.com/blog/multiline-ellipsis-in-pure-css/ ... maybe it might work for you? — Spudley, Aug 13 '13 at 10:16
Alternatively, a previous question here on SO gave some Javascript solutions: http://stackoverflow.com/questions/6222616/with-css-use-for-overflowed-block-of-multi-lines — Spudley, Aug 13 '13 at 10:17

Switching php character limit for responsive media queries

2 Answers2