单行/多行文本溢出处理

来源:互联网 发布:万磁王和x教授 知乎 编辑:程序博客网 时间:2024/05/16 15:45

单行文本溢出

  1. overflow: hidden;
  2. text-overflow: ellipsis;
  3. white-space: nowrap;

多行文本溢出

  1. overflow : hidden;
  2. text-overflow: ellipsis;
  3. display: -webkit-box;
  4. -webkit-line-clamp: 2;
  5. -webkit-box-orient: vertical;

jQuery实现

  1. $(".content").each(function(i){
  2. var $divH = $(this).height();
  3. var $oP = $("p", $(this)).eq(0);
  4. while($oP.outerHeight() > $divH){
  5. $oP.text($oP.text().replace(/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/, "..."))
  6. }
  7. });

jQuery截取固定字数

  1. $(".content").each(function() {
  2.     if ($(this).text().length > 50) {
  3.     var str = $(this).text($(this).text().trim().substring(0, 50));//截取50个字符
  4.         $(this).text($(this).text() + "…");
  5.     }
  6. });

 


0 0
原创粉丝点击