1

我正在创建一个需要截断溢出文本的网络应用程序。意思是我想将文本显示为某个宽度（比如原始宽度的 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)
}

但它不能正常工作。然后在谷歌搜索后，我知道文本溢出 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 上运行，那就太好了。

4

3 回答 3

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;
于 2013-10-02T05:21:44.337 回答
0

这是您的实际代码 =“width = 200px;” 您应该声明一个宽度 % : Ej ：

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 + "...";
}
)
于 2013-08-23T19:55:49.900 回答
0

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

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;
}
于 2013-08-23T20:27:26.417 回答