使用CSS不用程序实现文字自动截断 用省略号代替

.test{ 
width:200px; 
height:50px; 
border:1px solid red; 
padding:10px; 
overflow:hidden; /*不显示超过对象宽度的内容*/ 
text-overflow:ellipsis; /*当对象内文本溢出时显示省略标记（...）*/ 
white-space:nowrap; /*限制在一行内显示所有文本*/ 
}

www.jb51.net 我们

div.test{
width:200px;
height:100px;
border:1px solid red;
padding:10px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}

我们，努力打造精品学习网站。欢迎大家光临

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

赞 (0)

相关推荐

  • 用客户端js实现带省略号的分页

    用客户端js实现带省略号的分页

    复制代码 代码如下: <script type="text/javascript"> $(function(){ var n =$('.fenye >ul li:nth-child').length var c=$(".fenye ul li").index($('.fenye ul li.thisclass')) var setp1=c var setp2=n-c; //后余 if(n>10){ if(c>2){ for (i=2;i

  • jQuery实现控制文字内容溢出用省略号(…)表示的方法

    本文实例讲述了jQuery实现控制文字内容溢出用省略号(-)表示的方法.分享给大家供大家参考,具体如下: jQuery限制字符字数的方法 $(function(){ //限制字符个数 $(".text").each(function(){ var maxwidth=23; if($(this).text().length>maxwidth){ $(this).text($(this).text().substring(0,maxwidth)); $(this).html($(th

  • 怎么让表格为固定大小，超出的部分显示为省略号

    New Document .ctl{ table-layout:fixed } .ctl td{text-overflow:ellipsis;overflow:hidden;white-space: nowrap;padding:2px} 标题扩大副教授的士大夫看见似的看来法艰苦但是第十六棵飞机立刻标题扩大副教授的士大夫看见似的看来法艰苦但是第十六棵飞机立刻 (1/1) 标题扩大副教授的士大夫看见似的看来法艰苦但是第十六棵飞机立刻标题扩大副教授的士大夫看见似的看来法艰苦但是第十六棵飞机立刻 (1

  • android开发教程之textview内容超出屏幕宽度显示省略号

    实现如下: 复制代码 代码如下: <TextView android:layout_width="fill_parent"                    android:layout_height="wrap_content"                   android:id="@+id/hello"                    android:ellipsize="end"          

  • 让超出DIV宽度范围的文字自动显示省略号...

    div.titleholder { font-family: ms sans serif, arial; font-size: 8pt; width: 100; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }

  • js实现文字超出部分用省略号代替实例代码

    js实现文字超出部分用省略号代替实例代码

    话不多说,我们直接看代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&

  • 如果文字过长,则将过长的部分变成省略号显示

    <DIV STYLE="width: 120px; height: 50px; border: 1px solid blue;             overflow: hidden; text-overflow:ellipsis"> <NOBR>就是比如有一行文字,很长,表格内一行显示不下.</NOBR> </DIV>

  • css把超出的部分显示为省略号的方法兼容火狐

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">    <html>    <head>    <meta http-equiv="Content-Type" c>    <title>css把超出的部分显示为省略号的方法兼容火狐_我们_www.jb51.n

  • 使用CSS不用程序实现文字自动截断 用省略号代替

    .test{  width:200px;  height:50px;  border:1px solid red;  padding:10px;  overflow:hidden; /*不显示超过对象宽度的内容*/  text-overflow:ellipsis; /*当对象内文本溢出时显示省略标记(...)*/  white-space:nowrap; /*限制在一行内显示所有文本*/  } www.jb51.net 我们 div.test{ width:200px; height:100px

  • 基于Jquery的文字自动截取（提供源代码）

    插件需求(功能需要) 一个插件就是完成一个特定的功能,我们在动手制作一个插件时应该确定该插件开发完成后应具备哪些功能供我们使用. 在某天早上,按模式的完成开机.连接数据库.开启VS开发环境.调试程序.程序跑起了,可是页面中的有段内容超过了页面所容许的范围.这还不容易哟,SubString呗, 对,这的确是个好法子,能解决这类问题,但当页面需要被处理过后的内容进行交互,这种方法难免有点不适应了,那么我们就使用Jquery开发一个满足该需求的插件吧: 开发须知 如果您对使用Jquery开发插件的流程

  • MySql超长自动截断实例详解

    MySql超长自动截断实例详解

    MySql超长自动截断实例详解 小伙伴问到一个问题,为啥在项目中调用插入或者更新语句时超长的字无法自动截断,而在navicat中直接执行是可以自动截断的? 如下 CREATE TABLE `p_app_station` ( `WX_APP_ID` varchar(20) NOT NULL, `APP_SECRET` varchar(33) DEFAULT NULL, `IS_BINDING` int(1) DEFAULT '0', `ACCOUNT_ID` int(13) DEFAULT NUL

  • jQuery实现文字自动横移

    jQuery实现文字自动横移

    效果图: 实现文字自动横移 <style type="text/css"> #demo {overflow:scroll;width:740px; } #indemo { float: left; width: 800%;} #demo1 { float: left; } #demo2 { float: left;margin-left:7px;} </style> <script src="bootstrap-3.3.5-dist/js/jqu

  • 关于微信小程序爬虫token自动更新问题

    目录 一.微信模拟点击 二.配置fiddler获取请求头的信息写到本地文件 三.主爬虫业务代码 现在很多的app都很喜欢在微信或者支付宝的小程序内做开发,毕竟比较方便.安全.有流量.不需要再次下载app,好多人会因为加入你让他下载app他会扭头就走不用你的app,毕竟做类似产品的不是你一家. 之前做过很多微信小程序的爬虫任务,今天做下记录,防止很久不用后就会忘记,微信小程序分为两大类: 1.是不需要登录的(这种的话不做分析,毕竟没什么反爬) 2.需要登录的 2.1 登录一次之后token永久有效

  • java实现创建临时文件然后在程序退出时自动删除文件

    java实现创建临时文件然后在程序退出时自动删除文件

    通过java的File类创建临时文件,然后在程序退出时自动删除临时文件.下面将通过创建一个JFrame界面,点击创建按钮在当前目录下面创建temp文件夹且创建一个以mytempfile******.tmp格式的文本文件.代码如下: 复制代码 代码如下: import java.io.*; import java.util.*; import javax.swing.*; import java.awt.event.*; /**  * 功能: 创建临时文件(在指定的路径下)  */ public

  • url传递的参数值中包含&时,url自动截断问题的解决方法

    一.问题的引出 在做一个公告浏览功能时,只要通过url传递的某参数值中包含 & 或  ,就会出现问题--该变量的值无法显示. 问题定位结果: 遇到&时,该参数的值会自动截断,导致参数值传递有误. 二.问题的解决 java代码中做如下测试: String  charEncode = java.net.URLEncoder.encode("&"); System.out.println("字符& 转译后的值为:" + charEncode

  • 微信小程序实现文字跑马灯效果

    微信小程序实现文字跑马灯效果

    本文实例为大家分享了微信小程序实现文字跑马灯的具体代码,供大家参考,具体内容如下 效果 wxml <view>1 显示完后再显示</view> <view class="example"> <view class="marquee_box"> <view class="marquee_text" style="{{orientation}}:{{marqueeDistance}}px

  • 微信小程序实现文字从右向左无限滚动

    微信小程序实现文字从右向左无限滚动

    本文实例为大家分享了微信小程序实现文字无限滚动的具体代码,供大家参考,具体内容如下 布局页面wxml <scroll-view class="container"> <view class="scrolltxt"> <view class="marquee_box"> <view class="marquee_text" style="transform: translate

  • 微信小程序实现文字无限轮播效果

    本文实例为大家分享了微信小程序实现文字无限轮播展示的具体代码,供大家参考,具体内容如下 .JS文件  onLoad中添加下列代码 var self = this; var width = wx.getSystemInfoSync().screenWidth; function carousel_num() { var animation = wx.createAnimation({ transformOrigin: "50% 50%", duration: 5000, timingFu

随机推荐