div中文字溢出用省略号代替，最后面加上[详情] 求解

Posted 2023-04-23

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了div中文字溢出用省略号代替，最后面加上[详情] 求解相关的知识，希望对你有一定的参考价值。

<ul>
<li><div class="demol"><a href=""><img src="images/kehuxiao1.gif" /><span class="xiangxi" valgin=“bottom”>[ 详细 ]</span>上午刚打完四个电话，下午好像又觉得有很多话要和大勇说。电话打过去，大勇正在开会，不太方便接，婉转地说一会儿打给她。一会儿似乎很长，估计是大勇忘了，结果米米很不愉快，再锲而不舍地追了电话过去，问大勇是不是不在乎她。大勇觉得很烦。他承认米米很爱他，但是这样的爱，让大勇感觉有压力。分分秒秒想着他，表面是在乎他，但是让大勇感觉窒息。</a></div></li>
<li><div class="demol"><a><img src="images/kehuxiao1.gif" />上午刚打完四个电话，下午好像又觉得有很多话要和大勇说。电话打过去，大勇正在开会，不太方便接，婉转地说一会儿打给她。一会儿似乎很长，估计是大勇忘了，结果米米很不愉快，再锲而不舍地追了电话过去，问大勇是不是不在乎她。大勇觉得很烦。他承认米米很爱他，但是这样的爱，让大勇感觉有压力。分分秒秒想着他，表面是在乎他，但是让大勇感觉窒息。</a></div></li>
</ul>

.customercase ul
width:235px;
height:200px;
margin-left:auto;
margin-right:auto;
margin-top:10px;
overflow:hidden;
border:#030 dashed 1px;

.customercase li
width:235px;
height:100px;
overflow:hidden;
text-overflow:ellipsis;

.demol
font-size:12px;
width:235px;
margin:10px 0px 0px 0px;
line-height: 28px;

.demol img
float:left;
margin:10px 10px 10px 0px;

.xiangxi
color:#F00;
float:right;
margin-left:15px;
margin-right:0px;
display:inline;

=======

多行就得用js控制标签内的字符数了，判断到多少字符出现“...”
单行的就简单了，先设置div宽度，里面文字设置不换航和text-overflow: ellipsis;

a
width:240px;
display:block;
overflow: hidden;/*注意不要写在最后了*/
white-space: nowrap;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;

参考技术A 使用jq追加元素

var details = "<a href='#' style='color:red;font-size:14px'>详情</a>"
$("#details").append(details);//#details是你的文本的id

关于client浏览器界面文字内容溢出用省略号表示方法

在实际的项目中，因为client浏览器文字内容的长度不确定性和页面布局的固定性，难免会出现文字内容超过div（或其它标签，下同）区域的情况。此时比較好的做法就是当文字超过限定的div宽度后自己主动以省略号（…）显示，这样。依照习惯，人们都会知道这儿有文字被省略了。

使用CSS截断字符串方法

CSS中有个属性叫做text-overflow:ellipsis。

说明：长处是内容能够为不论什么HTML元素。包含超链接和图片等，在IE6中还会在结尾自己主动显示省略号。缺点是必须指定宽度数值。而且宽度不能是百分数，否则在IE中会被觉得是字符总长的百分比。

<div style="width:100px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;"> 随意长度的字符串 </div>

使用JQuery（Javascript）方法

通过在界面控件中。自己定义属性方式，截取字符串加入省略号方案来解决。比如參考网上资料。使用“limit”自己定义属性方案。基于Bootstrap代码例如以下所看到的：

<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面。不论什么其它内容都*必须*尾随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn\'t work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="js/respond.min.js"></script>
    <![endif]-->
  </head>
    <!-- jQuery (necessary for Bootstrap\'s JavaScript plugins) -->
  <script src="js/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
  <script src="js/bootstrap.min.js"></script>  
  <script>  
    $(\'table\').tooltip();  

    jQuery.fn.limit=function(){  
        var self = $("[limit]");  
        self.each(function(){  
            var objString = $(this).text();  
            var objLength = $(this).text().length;  
            var num = $(this).attr("limit");  
            if(objLength > num){  
                $(this).attr("title",objString);  
                objString = $(this).text(objString.substring(0,num) + "...");  
            }  
        })  
    }  
    $(function(){  
        $("[limit]").limit();  
    })  

  </script>
  <body>
    <h1>你好，世界！</h1>

    <table>  
        <tr>  
            <td class="centerContentTd" nowrap="nowrap" title="这里是所有内容" limit="8">这里显示截取后的内容长度大于8将用省略号取代</td>  
        </tr>  
    </table>  
  </body>
</html>