都知道用css3可以做到一行超出显示省略号,但多行的用css3很麻烦还要考虑兼容,今天用jquery判断字数来限制出现省略号 $(".ftlt_lt_wzne").each(function() { var maxwidth =36;//显示多少字符 if ($(this).text().length > maxwidth) { $(this).text($(this).text().substring(0, maxwidth)); $(this).html($(this).ht…

1. 鼠标样式 cursor default: 小白(箭头)默认 pointer:小手 move:移动 text:文本 not-allowed:禁止 2. 轮廓线(表单外发光)outline 给表单添加 outline:0;  或者 outline:none;  可以去掉默认蓝色边框 3. 防止拖拽文本域(resize) 实际开发中 textarea 是不允许拖拽文本域的,使用 resize:none; 解决 需要注意的是让  <textarea></textarea> 标签在一行…

超出一行 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 超出多行 overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;…

方法1.多行控制(css3) .text { width: 100%; word-break: break-all; display: -webkit-box; -webkit-line-clamp:; -webkit-box-orient: vertical; overflow: hidden; } line-clamp:几行以后显示省略号(例子为2行) 方法2.单行定宽 .text-ellipsis { overflow: hidden; text-overflow: ellipsis; w…

在开发小程序: 澳买 的 时候 遇到一个棘手的问题: 当搜索澳洲产品,获取产品列表的时候,有时候产品的名称翻译成中文特别长 我们不能全部在有限的列表里面把产品名都显示出来,这样格式不好控制,显示 出来也不太美观. 这时候我们就需要一个功能:比如设置只显示2行,2行显示不下的情况下我们 用省略号... 来替代,这样显示比较美观好看,显示效果如下   其实实现也是比较简单的 工程中样式文件.wxss内容如下: .productNameText { color: rgb(32, 27, 27); fo…

第一步: table {table-layout:fixed:}列宽由表格宽度和列宽度设定,不随文字多少变化 第二步: td { white-space:nowrap;/*文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止.*/ overflow:hidden;/*隐藏多余的内容*/ text-overflow:ellopsis;/*显示省略符号来代表被修剪的文本 for IE*/ -moz-text-overflow: ellipsis; /* for Firefox,moz…

.autocut {      width:250px;      overflow:hidden;      white-space:nowrap;      text-overflow:ellipsis;      -o-text-overflow:ellipsis;      -icab-text-overflow: ellipsis;      -khtml-text-overflow: ellipsis;      -moz-text-overflow: ellipsis;     …

我查资料的时候搜到这个博客 http://blog.csdn.net/u010168409/article/details/54429678 view{ overflow:hidden; //超出一行文字自动隐藏 text-overflow:ellipsis;//文字隐藏后添加省略号 white-space:nowrap; //强制不换行 }…

单号: white-space:nowrap; overflow:hidden; text-overflow:ellipsis; 多行: word-break: break-all; text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;…

<style>.text1 {    width:200px;    overflow:hidden;    text-overflow:ellipsis;    -o-text-overflow:ellipsis;    -webkit-text-overflow:ellipsis;    -moz-text-overflow:ellipsis;    white-space:nowrap;}.text2 {    width:200px;    word-break:break-all; …