css3 标题超过长度自动省略号

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>css文字截断____dowhatyouwant</title>
        <style>
            body{
                background-color:#f4f4f4;
                font-size:12px;
            }
            .text-overflow{
                width:200px;
                height:50px;
                border:1px solid red;
                border-top:4px solid red;
                padding:10px;
                overflow:hidden; /*内容超出宽度时隐藏超出部分的内容 */
                text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ;需与overflow:hidden;一起使用。*/
                white-space:nowrap; /*不换行 */
            }
        </style>
    </head>
    <body>
        <div class=‘text-overflow‘>我来测试一下这个文字截断是不是真的有效果我来测试一下这个文字截断是不是真的有效果我来测试一下这个文字截断是不是真的有效果我来测试一下这个文字截断是不是真的有效果我来测试一下这个文字截断是不是真的有效果我来测试一下这个文字截断是不是真的有效果</div>
    </body>
</html>
时间: 2024-08-10 00:06:40

css3 标题超过长度自动省略号的相关文章

小程序-超过长度自动隐藏并显示省略号

overflow: hidden; /*超过长度自动隐藏*/ text-overflow: ellipsis;/*添加省略号*/ white-space:nowrap;/*不换行*/ 注意:必须用text标签才能出现省略号,view不行 font-family:字体名 可以选择字体,具体需要去百度上面找 原文地址:https://www.cnblogs.com/Falling-snow/p/10089539.html

文本超过长度自动采用省略号

宽度不固定,超出宽度则以省略号"..."来表示. <div class="txt"> 文字文字文字文字文字,文字文字文字文字文字文字文字文字文字,文字文字文字文字文字文字文字文字文字,文字文字文字文字文字文字,文字文字文字文字文字 </div> .txt{ /*规定段落中的文本不进行换行:*/ white-space: nowrap; overflow: hidden; /* text-overflow属性表示规定当文本溢出包含元素时发生的事

jquery 字符个数(数字字母长度记为1,中文记为2,超过长度自动截)

<script type="text/javascript">  //返回val的字节长度  function getByteLen(val) {  var len = 0;  for (var i = 0; i < val.length; i++) {  if (val[i].match(/[^\x00-\xff]/ig) != null) //全角  len += 2;  else  len += 1;  }  return len;  }  //返回val在规定

css居然有根据容器宽度自动截取长度加省略号功能,强大!!

作者:☆威廉古堡♂ 项目中最初的做法(js截取): //字符长度截取包括中英文混合 function subStr(str, len) { str = str.toString(); var newLength = 0; var newStr = ""; var chineseRegex = /[^\x00-\xff]/g; var singleChar = ""; var strLength = str.replace(chineseRegex,"**&

css3实现超出文本指定行数(指定文本长度)用省略号代替

测试代码: 1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> 6 <meta http-equiv="Content-Type" content=&qu

css3 特性实现多行展示,超过则以省略号显示

最近做移动端的项目,遇到一个问题,要求文章的标题,如果太长的话,则默认显示两行,超过则以省略号显示. 很容易查找到利用css显示一行,如果超过则以省略号显示. 多行显得资料有点少 实现方法如下 实现效果

dedecms中调用文章,标题超过限制字数时,在标题后面加上省略号...

在dedecms中调用文章,当标题超过限制字数时,怎么在标题后面加上……呢.其实不论是在首页还是列表页还是内容页调用文章,不管是arclist还是list标签调用文章,只需要把[field:title]这个标签适当修改. 一般是类似于这样: {dede:arclist row='10'} <li><a href="[field:arcurl /]" title="[field:fulltitle/]">[field:title/]</a

CSS特效(7)——单行居中,多行居左,超过两行用省略号

单行居中,多行居左,超过两行用省略号 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-C

扩展一个字符自动长度自动检测的函数

/** * 扩展一个字符自动长度自动检测的函数 * @param {[type]} max [description] * @param {Function} callback [description] * @return {[type]} [description] */ jQuery.fn.maxLength = function(max, callback) { this.each(function(){ var type = this.tagName.toLowerCase(); va