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

但它无法正常工作。然后谷歌搜索后我才知道文本溢出的CSS实际上在android手机中效果不佳。

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

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

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

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

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

虽然目前我正在寻找Android设备的解决方案，但如果解决方案也能在ios上运行，那将会很棒。

Answer 1

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

解决方案非常简单。这里我主要关注的是获得不同方向的精确设备宽度。以下逻辑完美无缺。

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

这是您的实际代码=“宽度 = 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 + "...";
}
)

Answer 3

如果需要，可以使用伪元素模拟溢出省略号。请注意，只有拥有扎实的背景时才能使用此功能。

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

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

3 个答案: