Screen width of mobile devices ( android and ipod both)

Question

I am creating a web-app where I need to truncate overflowing text. Mean I want to display text into some width ( say 90% of original width) and then want to trim my text if it occupies more space. If I need to trim any text then i will put ellipse (...) at the end of the text.

I have tried below three approaches.But could not get any which could work on all devices.

1- I tried with CSS based solution.

{
overflow: hidden;
text-overflow: ellipsis;
width:90%;
}
or 
{
overflow: hidden;
text-overflow: ellipsis;
width:200px;    //somewhere suggested to use with in px rather than %(just tried)
}

But it is not working properly. Then after googling I come to know that text-overflow CSS actually not work well in android phones.

2- I have tried with window.devicePixelRatio and screen.availWidth two methods. But "screen.availWidth" do not give proper screen size in Nexus4.

var device_width = screen.availWidth;
var device_density = window.devicePixelRatio;

3- I have created my own algorithm of trimming title. Which also not work on some devices like micromex and samsung GT-S6802.I am using ow/dd and oh/dd where ow = original_width , oh= original_height and dd= device_density.

I think that there is some difference between physical device pixel and programming pixel(may be a wrong term).I could not use mobile_js as it is not production ready.Still I will try to explore it too to find out some solution.

But if anyone have faced such problem of truncating the text according to device with ( say 90% of device with) then please let me know.It will be of great help.

Although currently I am looking for solution for android devices only but it will be great if the solution can work on ios too.

Never, ever, use px with Android. Everything from about 120 pixels up to 2560. — Simon, Aug 23 '13 at 20:06
Can you describe "doesn't work"? Does it ignore the property (due to lack of support for the text-overflow) or crash and burn horribly? There's pretty much nothing you can do if Android doesn't support the text-overflow property. — cimmanon, Aug 23 '13 at 20:09
I have use no-wrap also. It does not trim and obviously never add any ellipse (...). Yes CSS text-overflow is not supported by android. Hence I have tried js solutions as mentioned above.I am looking for solution in javascript/jquery or if possible in CSS. — Gaurav Pant, Aug 23 '13 at 20:13
Are you sure it isn't because of the [text-rendering property](http://stackoverflow.com/questions/11860438/text-overflow-ellipsis-jumps-behind-text-on-android)? — cimmanon, Aug 23 '13 at 20:25
yes I am sure it is not because of text-rendering.. i gone through this too. I am not using text-rendering. — Gaurav Pant, Aug 23 '13 at 20:41

score 1 · Accepted Answer · answered Oct 02 '13 at 05:21

I have fixed this problem.Hence answering my own problem.

The solution is pretty simple. Here my main concern to get exact device width for different orientations. Below logic works perfectly.

var deviceWidth = screen.availWidth;
var deviceHeight = screen.availHeight;
var device_density = window.devicePixelRatio;
switch(window.orientation) {
       case 90: case -90:   //landscape mode
           device_cur_width= (deviceWidth>deviceHeight)?deviceWidth:deviceHeight;
           break;
       default:             //portrait mode
           device_cur_width= ((deviceWidth<deviceHeight)?deviceWidth:deviceHeight);
           break;
}
//I know the exact device width so I can calculate max_allowed_title_width.
max_allowed_title_width = (device_cur_width/device_density) *0.90;

Alvaro Ricotta · Answer 2 · 2013-08-23T20:45:02.820

0

this is your actual code = "width = 200px;" You should declare a width % : Ej :

css:

{
overflow: hidden;
text-overflow: ellipsis;
width:90%
}

It should works fine. also you should add a nowrap property to prevent the break line. css:

{
white-space: nowrap;
}

also be careful, you mentioned you used "=" instead of ":"

if all that don't work you can too use it javascript :

var title = document.getElementById("id of title element");
title.innerHTML = title.innerHTML + "...";

So , you should use :

var title = document.getElementById("your title element id");
var sW = screen.width;
if (title.offsetWidth <= (sW * 0.9)) {
title.innerHTML = title.innerHTML + "...";
}
)

edited Aug 23 '13 at 20:45

answered Aug 23 '13 at 19:55

Alvaro Ricotta

1
1

I tried it .. It is not working properly in nexus 4 and may devices even. Please google text-overflow problem with android.You will get many articles as I have alredy mentioned in request.Also I have already commented there that i have used 'px' on someone suggestion on some portal.Please read the request carefully. – Gaurav Pant Aug 23 '13 at 19:59
you try to use ":" instead of "=" xD, if you have a link i can check it for you . – Alvaro Ricotta Aug 23 '13 at 20:03
Ya.. sorry i have corrected it.It was just typo.I have used ":" only.I don't have any link but I have invested almost 2 day, CSS text-overflow not work properly. It work great in browser but not in android app. – Gaurav Pant Aug 23 '13 at 20:04
check the js solution dude!. – Alvaro Ricotta Aug 23 '13 at 20:45
"screen.width;" do not provide proper width for some mobiles.Also please refer http://stackoverflow.com/questions/5456582/screen-width-and-screen-availwidth-difference-in-javascript – Gaurav Pant Sep 05 '13 at 05:27

score 0 · Answer 3 · answered Aug 23 '13 at 20:27

You can emulate overflow-ellipsis using pseudo elements if you need to. Note that this will only work if you have a solid background.

http://cssdeck.com/labs/aramol9m

<p class="foo">I pity the foo who crosses Mr. T</p>

.foo {
  width: 10em;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
}

.foo:after {
  display: inline-block;
  content: '...';
  position: absolute;
  bottom: 0;
  right: 0;
  background: white;
}

Screen width of mobile devices ( android and ipod both)

3 Answers3