<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>文字超出自动截取为...</title> </head> <body> <style> *{ margin:0; padding:0; } body{font-family:Arial, Helvetica, sans-serif;} h2,em{ font-weight: normal; font-style: normal; } .test{ width:300px; margin:10px auto 0 auto; border:1px solid #eeeeee; padding:5px; color:#333333; } .test-title{ padding:0 10px; color: red; } /*文字超出自动截取为...*/ .text-cut{ display:block; width:100%; text-overflow: ellipsis; white-space: nowrap; overflow:hidden; } </style> <div class="test"> <h2 class="test-title"> <em class="text-cut">In most browsers, clicking on text or an image within the label will give focus to the area.</em> </h2> <p>What the label does is create an association between its contents and a control on the page. In most browsers, clicking on text or an image within the label will give focus to the area. In the case of a radio button, it will select it and in the case of a checkbox, it‘ll alternate between the two states (checked and unchecked).</p> </div> </body> </html>
文字超出自动截取为...
时间： 2024-10-07 02:24:32
文字超出自动截取为...的相关文章
css文字超出自动显示省略号
只针对单行文本有效: 01.针对块状元素 ul li{ width: 180px; text-overflow: ellipsis; white-space: nowrap;/*禁止自动换行*/ overflow: hidden; } css文字超出自动显示省略号显示省略号 css文字超出自动显示省略号 css文字超出自动显示省略号显示省略号 02.针对table table{ table-layout:fixed; } table td{ word-break:keep-all;/* 不换行
JS~字符串长度判断，超出进行自动截取（支持中文）
今天一个小弟问我的问题,在文本框中输入字符,如果超出指定长度,就把它截取,要求中文等于两个字符的长度,我找一下资料,把这个功能实现了,下面是JS代码: <html> <script src="http://common.cnblogs.com/script/jquery.js" type="text/javascript"></script> <body> <input type="text"
文字超出隐藏并显示省略号
文字超出了需要隐藏并显示省略号这个在工作中很多时候都要用到,我想很多人都碰到过吧,这个有两种解决方法 一是用程序开截取字符长度,这个其实也是可以的 第二种是用样式来做,这里主要介绍一下用样式怎么来做吧,我话也不多说了吧直接上代码吧, css样式如下: .css1{ color:#6699ff;border:1px #ff8000 dashed; margin-bottom:20px; width: 20em;/*不允许出现半汉字截断*/ } .css2 { overflow: hidden; /
html使用css让文字超出部分用省略号三个点显示的方法案例
html使用css让文字超出部分用省略号三个点显示的方法: 我正确使用的就是下面的代码,li里面是a标记.在IE和google中使用是正常的,火狐不知道,我也不在意,等你来测 li{ display:block;overflow:hidden;word-break:keep-all;white-space:nowrap;text-overflow:ellipsis; } 直接拿这个css样式去用吧,编程嘛,解决就好,不用看下面的了. 语法: text-overflow : clip | elli
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,"**&
javascript 文字大小自动适应文本框 （文字大小自动调整）
javascript 文字大小自动适应文本框 (文字大小自动调整) TOC 思考 思考一:面积法 思考二:微调法 代码 在进行类似微博墙之类的展示页面中,经常会遇到这样的需求:在固定大小的区域放入字数不定的文字,但是要求字体可以自动改变大小来自动填充这些区域.如下所示: 遇到这种情况怎么办呢? 思考 思考一:面积法 看到需求我的第一个反应是能不能通过计算,先获取整个区域的大小,然后再根据字数,计算出每个文字所占的区域(整体区域面积/总共字数),再根据每个文字所占的区域设置字体大小. 理论上这种方
CSS+Js在段落文字最后自动加入隐藏文字
CSS+Js在段落文字最后自动加入隐藏文字 CSS和JavaScript控制段落最后自动添加指定的隐藏文字,不建议这样用,因为对搜索引擎不太友好.不过作为一项技巧来研究,下面帖出具体的代码,以供参考指正: 01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 0
【转】html使用css让文字超出部分用省略号三个点显示的方法案例
html使用css让文字超出部分用省略号三个点显示的方法: 我正确使用的就是下面的代码,li里面是a标记.在IE和google中使用是正常的,火狐不知道,我也不在意,等你来测 li{ display:block; overflow:hidden; word-break:keep-all; white-space:nowrap; text-overflow:ellipsis; } 直接拿这个css样式去用吧,编程嘛,解决就好,不用看下面的了. 语法: text-overflow : cli
文字超出隐藏 且后面变成点
实例: <p>文字敢超出我就敢隐藏显示点点文字敢超出我就敢隐藏显示点点文字敢超出我就敢隐藏显示点点</p> css解决方法 1.常规css方法——可以实现IE,Safari,chrome,opera浏览器下文字溢出省略号表示 现在在火狐的高版本也支持了(火狐低版本不支持) p{width:200px; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow:hidden;} 注