【转】如何用css限制文字长度,使溢出的内容用省略号…显示

文章转自这里(现在貌似被黑了,建议不要点击了) ps:因在该地方没看到转载按钮,复制下存到这里以待自己方便,别人能看到帮助一下更是乐意之至,效果亲测可以实现,兼容IE.谷歌.火狐由于文字内容长度的不确定,而网页的布局精确性,如果文字内容超出限定的区域(div,span等),会使页面变形.为了满足页面的布局合理,用css样式自动限制文字长度,使溢出内容用省略号…显示. 限制文字长的css样式如下: .text_overflow{ width:320px; white-space:nowrap;…

css控制文字长度，超出长度显示...

css控制文字长度,超出长度显示... .style { max-width: 165px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }…

css限制文字显示字数长度，超出部分自动用省略号显示,防止溢出到第二行

为了保证页面的整洁美观,在很多的时候,我们常需要隐藏超出长度的文字.这在列表条目,题目,名称等地方常用到. 效果如下: 未限制显示长度,如果超出了会溢出到第二行里.严重影响用户体验和显示效果. 我们在列表样式里添加css,如下图. 修改后效果: 正文开始 (1).文字超出一行,省略超出部分,显示'...' 如果这种情况比较多,可以取一个切合作用的类名用于复用. .line-limit-length { overflow: hidden; text-overflow: ellipsis; whit…

angularjs如何在ng-repeat过程中控制字符串长度超过指定长度后面内容以省略号显示

angular.module('ng').filter('cut', function () { return function (value, wordwise, max, tail) { if (!value) return ''; max = parseInt(max, 10); if (!max) return value; if (value.length <= max) return value; value = value.substr(0, max); if (wordwise)…

css超出内容以省略号显示

控制只显示2行,并以省略号结束 text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; 效果显示不过值得注意的是,双行超出显示的话,根据line-height行高显示的话要同时设置高和行高的话,要注意:如height:48px;line-height:24px; 或:直接:line-height:24px; 同理,3行4行都是不在话下对于平时只显示…

jQuery关于文字内容溢出用点点点(…)省略号表示

1.jQuery限制字符字数的方法代码很简单,使用也很方便,如下: $(document).ready(function(){//限制字符个数$(“.zxx_text_overflow”).each(function(){var maxwidth=23;if($(this).text().length>maxwidth){$(this).text($(this).text().substring(0,maxwidth));$(this).html($(this).html()+’…’);}});…

css限制显示字数，文字长度超出部分用省略号表示【转】

为了保证页面的整洁美观,在很多的时候,我们常需要隐藏超出长度的文字.这在列表条目,题目,名称等地方常用到. (1).文字超出一行,省略超出部分,显示'...' 如果这种情况比较多,可以取一个切合作用的类名用于复用. .line-limit-length { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; //文本不换行,这样超出一行的部分被截取,显示... } <div class="item">…

纯CSS实现文字一行居中，多行左对齐的方法

其实这种需求还是蛮常见的,主要用于产品列表页面,用于产品图片下面,显示产品的名称. 想要实现的效果为: 未知文字长度,当文字长度小于盒子宽度,也就是一行时,文字居中. 当文字长度大于盒子的宽度,会自动换行,成为多行文字,此时文字左对齐. 1.利用行内元素: 我首先想到了这个思路,思路如下: 让P居中,P中的文字左对齐:(P的父级text-align:center; P自身text-align:left;) P的宽度根据文字的宽度伸缩,当文字为一行时,则P的宽度小于LI的宽度,居中:则看上去文字…

CSS实现文字竖排 DIV CSS文字垂直竖列排版显示如何实现？

DIV CSS实现文字竖排排版显示兼容各大浏览器,让文字垂直竖列排版布局. 有时我们需要一段文字进行从上到下竖列排版,我们知道CSS样式中有一样式可以让其竖列排版,但所有浏览器不全兼容,逼不得已放弃.但DIVCSS5有2中方法对文字字体实现竖排显示,在接下来通过知识讲解与实例案例演示让大家中文让文字字体垂直竖排显示. 实际的文字垂直竖排显示截图一.原始使用writing-mode属性-不推荐 - TOP 语法:writing-mode:lr-tb或writing-mode:tb-rl…

IOS实现UIButton图文混排、自定义按钮按下和正常状态下不同的背景颜色、根据文字长度自定义UIButton长度

在一些项目中,我们需要自定义自己的UIButton,使Button上面同时具有图片和文字描述,实现自定义UIButton的图文混排. 首先我们需要定义一个继承自UIButton的类,同时实现自己的initWithFrame:方法.方法声明在这个类的头文件中. self = [super initWithFrame:frame]; if (self) { } return self; 在if判断语句中,我们可以实现对按钮的一些自定义属性和方法,如按钮圆角.Title文本.背景颜色等信息. 如 se…

table 中文字长度大于td宽度，导致文字换行解决方案

1.TD不换行 nowrap属性表格table的td单元格中,文字长了往往会撑开单元格,但是如果table都不够宽了,就换行了好像(不要较真其他情况,我只说会换行的情况).换行后的表格显得乱糟糟,不太好看,我不喜欢这样的换行.当然可以通过对每列td都设置宽度,那样太麻烦了,并且有时没法预计td中的文字会有多长,没法给固定宽度. 为了让表格里文字不换行(预计也不会太长的字符串),可以给表格里td添加一个nowrap属性,如 <td nowrap>文字内容</td> 这样. 但是如果…

CSS技巧: CSS隐藏文字的方法(CSS text-indent: -9999px;)

建站过过程中朋友喜欢把网站名称用H1表示,但从美观考虑,要用logo图片来代替h1,这时需要隐藏h1内的这段文字,但又不能对搜索引擎不友好,否则就失去了定义h1标签的意义. 在CSS中如何以图代字,找了一下CSS隐藏文字的方法,有以下几条: 1.display:none; 这个大家普遍说法是,搜索引擎可能认为被隐藏的文字属于垃圾信息而被忽略,不为隐藏的对象保留物理占位空间.GG也搜CSS文件?不过如果用这个方法,<h1>如何设计,也是难题. 2.visibility:hidden; 和disp…

[frontend] 根据文字长度自适应宽度自适应高度+ Uncaught ReferenceError: xxx is not defined at HTMLDivElement.onclick

CSS一行代码就可以解决第一个问题: 1.1 根据文字长度,自适应标签宽度解决方法:把width的设置删掉,加一行代码 display:table; .tag-footdetail{ /*width: 300px;*/ height: 40px; font-size: 1.5rem; line-height: 40px; text-align: center; border-radius: 15px; border: 1px solid #D2B991; float: lef…

CSS技巧分享：如何用css制作横排二级下拉菜单

原文:CSS技巧分享:如何用css制作横排二级下拉菜单导航菜单是每个网站所必备的功能,也是每个学习制作网站的朋友所必须接触的,如何用css样式制作一个简单漂亮的二级下拉菜单呢,下来小编就一步一步教大家来制作横排二级下拉菜单,让我共同来学习吧. 首页我们打看dreamweaver或其它编辑器,创建一个名为nav的导航菜单 <div class="nav"> <ul> <li><a href="#">栏目一</a&…

伪元素选择器，选择器优先级，CSS修改文字属性，CSS修改字体属性，CSS修改其他属性

伪元素选择器未使用元素选择器的效果第一行:伪元素选择器:选择部分内容第二行:伪元素选择器:选择部分内容伪元素选择器:选择部分内容伪元素选择器:选择部分内容 ::selection:选择指定元素中被用户选中的内容未使用该伪元素选择器时,我们用鼠标去选中元素内容时使用该伪元素选择器后,我们用鼠标去选中元素内容时 p::selection{ background-color: purple; } ::before:可以在内容之前插入新内容你好吗?第一行:伪元素选择器:选择部分内容第二…

如何用CSS实现在新窗口打开链接？

*如何用CSS实现在新窗口打开链接? <style type="text/css">  </style> <div class="target1"> <a href="http://www.lanrentuku.com/">www.lanre…

如何用css画出三角形

看到有面试题里会有问到如何用css画出三角形众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及颜色. 如果你将宽度调的足够大,改变不同方向的颜色,你就可以发现盒模型的border是四个梯形一样的线条. 这个时候如果将盒模型内部的height,width调为0px,则三角形就形成了. 1 border:100px solid transparent //边框100px,实线,透明颜色,下面三行…

一张png图片上面有多个图标，如何用CSS准确的知道其中某个图片的坐标

一张png图片上面有多个图标,如何用CSS准确的知道其中某个图片的坐标 ,如下图可以使用 background background:url(images/xx.png) 40px 10px no-repeat;…

CSS实现Div透明，而显示在上面的文字不透明，但也可看到显示在下面的图片内容

CSS实现Div透明,而显示在上面的文字不透明,但也可看到显示在下面的图片内容,DiV透明其实挺简单,主要是为background定义opacity属性,一般这个是最大值是1,数值越接近1,则越不透明,也就是越小越透明,颜色可以自定义.这样可以让图片上的文字更清淅,在一些图片特效中我们会见到这种效果. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/…

(转载)最实用的清除浮动代码 css的文字过长裁剪后面跟着省略号

css: .clearfloat:after{display:block;clear:both;content:"";visibility:hidden;} .clearfloat{} 布局: <div class="div1 clearfloat"> <div class="left">Left</div> <div class="right">Right</div>…

获取UILabel上最后一个字符串的位置。获取文字长度和高度，自动换行

//行的高度. -(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{ NewNotificationCell *cell = (NewNotificationCell *)[self tableView:tableView cellForRowAtIndexPath:indexPath]; cell.myLabel.text = [self.dataArray…

用CSS让文字居于div的底部

css对文字的布局上没有靠容器底部对齐的参数,目前使用的一个不错的方法也比较好.就是用position属性来解决,看下面的代码,用position的相对和绝对定位功能也轻松的实现了,文字靠近div低部对齐,并且靠近的距离还可以精确到像素,自己可以调节,是不是很不错呢? <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd&q…

【CSS】如何用css做一个爱心

摘要:HTML的标签都比较简单,入门非常的迅速,但是CSS是一个需要我们深度挖掘的东西,里面的很多样式属性掌握几个常用的便可以实现很好看的效果,下面我便教大家如何用CSS做一个爱心. 前期预备知识: 明白正方形的画法. 明白圆形的画法. 明白什么是定位. 明白怎么旋转. 话不多说,先教大家怎么用css画一个圆形. .disc1{ width: 100px; height: 100px; border:1px solid red; background-color: red; margin:300…