在html/css中,无论如何都有一个跨度"切断"而不是转到另一条线(并在视觉上显示切断？)

Question

我有一个asp.net-mvc网页,我在一些图像后显示一些文字,我不希望文本换行到下一行.如果有截止点,我希望它切断并在末尾加上"......"？(如果没有视觉指示器表明存在截止点,那么我很紧张,那么用户就不会意识到这种情况发生了.

  <img src="some_image.png">
  <img src="some_image1.png">
  <img src="some_image2.png">
  <span id="myText">a bunch of text after the images</span>

#myText
{
      overflow:hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
}

因此,如果数据内容仅占用整行,则显示完整描述,但不是包装到另一行,而是附加"..."

我可以简单地根据字符串长度在服务器端做一些"修剪"逻辑,但我不知道如何检测是否会发生包装(给定用户屏幕宽度等)

对这种情况有什么建议吗？

Answer 1

只是CSS:http://jsfiddle.net/FdyG2/1/

div { 

    width: 400px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;

}

避免破线: white-space: nowrap;

在行尾有三个点: text-overflow:ellipsis;

重要提示:您需要设置宽度和溢出:隐藏.