移动设备的屏幕宽度（android和ipod都有）

Question

我正在创建一个需要截断溢出文本的网络应用程序。意思是我想将文本显示为某个宽度（比如原始宽度的 90%），然后如果它占用更多空间，则想修剪我的文本。如果我需要修剪任何文本，我会在文本末尾添加椭圆 (...)。

我尝试了以下三种方法。但找不到任何可以在所有设备上运行的方法。

1- 我尝试了基于 CSS 的解决方案。

{
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)
}

但它不能正常工作。然后在谷歌上搜索后，我知道 text-overflow CSS 实际上在 android 手机中效果不佳。

2- 我尝试过使用 window.devicePixelRatio 和 screen.availWidth 两种方法。但是“screen.availWidth”在 Nexus4 中没有给出合适的屏幕尺寸。

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

3- 我创建了自己的标题修剪算法。这也不适用于 micromex 和 samsung GT-S6802 等设备。我使用的是 ow/dd 和 oh/dd，其中 ow = original_width ，oh= original_height 和 dd= device_density。

我认为物理设备像素和编程像素之间存在一些差异（可能是一个错误的术语）。我无法使用 mobile_js，因为它还没有准备好生产。但我也会尝试探索它以找出一些解决方案.

但是，如果有人遇到过根据设备（比如 90% 的设备）截断文本的问题，请告诉我。这将有很大帮助。

虽然目前我正在寻找仅适用于 android 设备的解决方案，但如果该解决方案也可以在 ios 上运行，那就太好了。

Answer 1

我已经解决了这个问题。因此回答我自己的问题。

解决方案非常简单。在这里，我主要关心的是获得不同方向的确切设备宽度。以下逻辑完美运行。

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; 

Answer 2

如果需要，您可以使用伪元素模拟溢出省略号。请注意，这仅在您有坚实的背景时才有效。

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

Answer 3

这是您的实际代码 = "width = 200px;" 您应该声明一个宽度 % ： 乙：

css:

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

它应该可以正常工作。 你也应该添加一个 nowrap 属性来防止断线。 CSS：

{
white-space: nowrap;
}

还要小心，你提到你使用“=”而不是“：”

如果所有这些都不起作用，你也可以使用它 javascript：

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

所以，你应该使用：

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