众所周知，通过css设置文字强制不换行超出用省略号表示很简单：
 
{
    white-space: nowrap; 文本强制不换行；
    text-overflow:ellipsis; 文本溢出显示省略号；
    overflow:hidden; 溢出的部分隐藏；
}
 
但是如果要想显示两行，超出用省略号表示要怎么写呢？
 
{
    overflow: hidden;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}
 
-webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。 
 常见结合属性： 
 1，display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。 
 2，-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。 
 3，text-overflow: ellipsis;，可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本 。

                                   截断过长字符串为省略号算法
 
  本文章转载自http://blog.csdn.net/norains/archive/2010/06/02/5643039.aspx
 
 
 
 
 
   真的很想说，这标题咋看咋别扭，咋念咋拗口，但我实在想不出更好的标题了，就先权当如此吧。如果你有更好的想法，欢迎告诉我，谢谢！:)
 
    为避免浪费各位看官的时间，我们还是直接转入正题吧。在实际的开发当中，我们经常会遇到要字符串比显示的区域要长的情况，从而导致显示不全。最合适的方法自然是跑马灯的滚动显示，不过这个可能稍微复杂了点，并不是所有的情况下都能适用；也许最最简易的，可能就是直接将超出范围的字符串用省略号替代了。
 
    好像不是很难，不是么？但实际并非如此。比如，有一个字符串"你好，我们可以聊聊么？"，你是决定只显示哪部分，而哪部分是被替代的呢？这个字符串所要显示的文字，如何确定？大部分菜鸟的第一反应，估计就是固定要只是显示多少个字符，超过的，就一律以省略号替代。实际上，这是不行的。如果字符全部为中文，或是全部为英文还行，如果又有中文和英文，那么由于互相字符宽度不同，显示就很死翘翘了。
 
　　假设我默认的显示文字为九个，那么在我的平台上显示的就是这样：
　　
　　
　　很明显看到，这两串字符的宽度完全是不同的，而下面的英文字符其实可以容纳更多。所以，以固定数目来做截取的标准，是完全不可取的。
　　
　　有的朋友或许对GetTextMetrics比较熟悉，想到调用该函数返回字体的平均宽度，然后再与范围宽度相除。但毕竟平均不是实际，有时候用平均值来计算，误差也是很大的。
　　
　　不过，微软毕竟还是微软，并没有将路给堵绝。它还给我们留了一个GetTextExtentPoint函数，用它来获取字符串所占的空间范围。
　　
　　在具体说这个函数之前，我们先来看一副图：
　　
　　
　　这是字符串超出显示范围的一个情况。其中，蓝色方框的区域是显示的区域，绿色方框是应该显示的字符，而红色则是省略号占据的空间。对于我们来说，只需要知道绿色方框能包含多少个字符即可。
　　
　　而GetTextExtentPoint函数能够计算输入的字符串占据的空间范围，所以通过它进行运算，就能获知我们需要显示多少个字符。现在的问题是，我们如何去调用这个函数？难道先从"你"开始，依次递进，以"你"、"你好"、"你好，"、"你好，这"等等这样的方式一个一个作为形参去进行测试？不用想，这效率，肯定奇差，甚至可能成为拖慢程序的一个禁锢。
　　
　　所以，简单点，我们就用二分法吧。声明一个函数，它可以接收当前的hdc，显示范围的大小，以及测试的字符串，返回的是该显示范围能容纳下的字符。
　　
　　故此，函数实现如下：
 
DWORD GetComfortSize(HDC hdc,DWORD dwWidth,const TSTRING &strText)   
{   
 //二分法查找   
  
 DWORD dwComfortSize = 0;   
 DWORD dwBeginSize = 0;   
 DWORD dwEndSize = strText.size();   
    
 while(TRUE)   
 {   
  DWORD dwMiddleSize = (dwEndSize + dwBeginSize) / 2;   
  if(dwMiddleSize == dwBeginSize || dwMiddleSize == dwEndSize)   
  {   
   //两个点之间已经没有数值可以检测，退出循环   
   dwComfortSize = dwBeginSize;   
   break;   
  }   
  
  SIZE sizeChk = {0};   
  ::GetTextExtentPoint(hdc,strText.c_str(),dwMiddleSize,&sizeChk);   
  
  if(sizeChk.cx == dwWidth)   
  {   
   //数值刚好合适，跳出循环   
   dwComfortSize = dwMiddleSize;   
   break;   
  }   
  else if(static_cast<DWORD>(sizeChk.cx) > dwWidth)   
  {   
   //重新设置边界   
   dwEndSize = dwMiddleSize;   
  }   
  else  
  {   
   //重新设置边界   
   dwBeginSize = dwMiddleSize;   
  }   
  
 }   
  
 return dwComfortSize;   
     }   


本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/norains/archive/2010/06/02/5643039.aspx 
 
 
 
函数的调用其实也很简单，但我们要注意，调用前先将省略号的空间给去掉。故实际的调用代码简单如下：
 
 
 
//获取省略号的占据范围   
     static const TSTRING FLAG_ELLIPSIS = TEXT("...");   
 SIZE sizeEllipsis = {0};   
     GetTextExtentPoint(hdc,FLAG_ELLIPSIS.c_str(),FLAG_ELLIPSIS.size(),&sizeEllipsis);   
　　   
     DWORD dwMaxDisp = GetComfortSize(hdc,sizeExtent.cx - sizeEllipsis.cx,strChk);  
 
 
 
 
　　
　　那么，看看我们这函数的实际显示成果吧：
　　
 
 
 
 
本文来自CSDN博客，转载出处：http://blog.csdn.net/norains/archive/2010/06/02/5643039.aspx
 
 
 
 
 

1.运行截图
 
 
2.源码
 
#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>
#include <QList>

namespace Ui {
class Widget;
}


class Widget : public QWidget
{
    Q_OBJECT

public:
    explicit Widget(QWidget *parent = 0);
    ~Widget();
public:
    QString getElidedText(QFont font, QString str, int MaxWidth);

private:
    Ui::Widget *ui;

};

#endif // WIDGET_H
 
#include "widget.h"
#include "ui_widget.h"
#include <QFont>

const int g_maxValue = 50;

Widget::Widget(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::Widget)
{
    ui->setupUi(this);
    ui->label->setAlignment(Qt::AlignCenter);
    ui->label->setFixedWidth(g_maxValue);
    ui->label->setFixedHeight(30);
    ui->label->setStyleSheet("background-color: rgb(0, 255, 0);");
    ui->label->setFont(QFont("微软雅黑",10));

    QString str = QString("一二三四五");

    QString txt = getElidedText(ui->label->font(), str, g_maxValue);

    ui->label->setText(txt);
    ui->label->setToolTip(str);


}

Widget::~Widget()
{
    delete ui;
}

QString Widget::getElidedText(QFont font, QString str, int MaxWidth)
{
    if (str.isEmpty())
    {
        return "";
    }

    QFontMetrics fontWidth(font);

    //计算字符串宽度
    int width = fontWidth.width(str); 

    //当字符串宽度大于最大宽度时进行转换
    if (width >= MaxWidth)
    {
        //右部显示省略号
        str = fontWidth.elidedText(str, Qt::ElideRight, MaxWidth);  
    }

    //返回处理后的字符串
    return str;   
}

 
 

 
列表中字符串长度过长用省略号代替及鼠标悬停显示完整字符串jquery
 
问题描述
目标效果1：内容超过一定长度后以省略号显示
目标效果2：鼠标悬停时，用悬停框的形式显示全部信息。
最终效果：成功

 
问题描述
 
在修改bug过程中，遇到列表中的字符串过长，解决方案是尾部用省略号代替。鼠标悬停时，用悬停框的形式显示全部信息。
 
 首先，对于列表中的字符串长度过长，对这列字符串设置css属性，列表代码情况如下：
 
 
目标效果1：内容超过一定长度后以省略号显示
 
做法：对列表中的serach-item设置css属性
 
white-space: nowrap 保证文本内容不会自动换行，如果多余的内容会在水平方向撑破单元格。
overflow: hidden 隐藏超出单元格的部分。
text-overflow: ellipsis 将被隐藏的那部分用省略号代替。
 
 此时，已经完成了第一步工作。
 由于字符串隐藏的内容不见了，为了让用户能够看到字符串的全部内容，因此设置鼠标悬停时显示全部内容的功能。我们采取的最终做法是在列表中(li标签)加入titile属性，也就是将完整字符串赋值给title属性。比如title=“字符串内容”,此时问题解决（解决大部分项目问题）。
 
目标效果2：鼠标悬停时，用悬停框的形式显示全部信息。
 

 然而，由于项目开发中字符串内容是动态的，并且字符串内容item.name的格式如：
 
DS-2CD5032FWD-A_<font color="red">1</font><font color="red">8</font><font color="red">8</font>.<font color="red">1</font>2<font color="red">1</font>Camera 0<font color="red">1</font>
 
楼主经过多种方法尝试，最终用正则解决了这个问题。思路：将字符串的html格式数据过滤，然后用把过滤后的字符串赋值给title。
 
 
最终效果：成功