CODEWITHSUNDEEP
javascriptandroidjqueryioscss
Gaurav Pant
Gaurav Pant

Reputation: 4199

Screen width of mobile devices ( android and ipod both)

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.

Upvotes: 1

Views: 602

Answers (3)

Gaurav Pant
Gaurav Pant

Reputation: 4199

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;

Upvotes: 1

Alvaro Ricotta
Alvaro Ricotta

Reputation: 1

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 + "...";
}
)

Upvotes: 0

cimmanon
cimmanon

Reputation: 68319

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;
}

Upvotes: 0

Related Questions