css - Switching php character limit for responsive media queries -

i have responsive site has php character limits on blocks of text. limit varies depending whether it's desktop, tablet or mobile i'm struggling switch limit depending on device/size.

this php code i'm using limit 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 switch limit in relation media queries make site responsive? far know can't done css can it?

---

css attempt:

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

at moment, limits 1 line, possible show 5 lines?

you can not. php serverside, , server not know resolution of screen without help.

you add , ajax-call tell php size of screen , load new text php gives you

an easier way (i dont recommand ajax one) this:

<div id="alwaysshowthis"> text upto 400 characters </div> <div id="showifmedium"> show text characters 401 till 600</div> <div id="showifbig"> show text character 601 , up</div> 

and control via mediaqueries in css

another method text-overflow suggested in other comments (i'm going add complete answer)

elem{     text-overflow: ellipsis; } 

this take size available , add dots @ end. bit more flexible if responsive responsive (e.g. 400px works, , 410px works, 2nd 1 allow few more characters)