效果图下:超出td的宽度范围,会用省略号代替
实现如下
<html>
<head>
</head>
<body>
<style type="text/css">
.mytable{
table-layout:fixed;
width:98%
border:0px;
margin:0px;
background-color:#BDE1F2;
}
.mytable tr td{
text-overflow:ellipsis; /* for IE */
-moz-text-overflow: ellipsis; /* for Firefox,mozilla */
overflow:hidden;
white-space: nowrap;
border:0px;
text-align:left
}
</style>
<table width="500px" class="mytable">
<tr>
<td width="20%">ONE PIECE 海贼王</td>
<td width="80%">ONE PIECE”在故事中为“一个大秘宝”之意。故事描述男主角‘草帽’
蒙其·D·路飞为了当上“海贼王”而踏上“伟大航道”及与其伙伴的经历。传说中‘海贼王’
哥尔·D·罗杰在死前说出他留下了具有财富、名声、力量世界第一的宝藏“ONE PIECE”,许
多人为了争夺“ONE PIECE”,争相出海,许多海贼开始树立霸权,而形成了“大海贼时代”。
十年后,路飞为了要实现与因救他而断臂的四皇‘红发’香克斯的约定而出海,在遥远的路途
上找寻着志同道合的伙伴,一起进入“伟大航道”,目标当上“海贼王”</td>
</tr>
</table>
</body>
</html>
分享到:
相关推荐
table中的内容经常超过了我们固定的td长度,这个css控制td的内容,如果超过了td长度则自动隐藏超过长度的字符,显示... 鼠标移过时,显示完整的td信息。
css控制字母、数字文字自动换行方法css控制文字自动换行css控制文字自动换行
纯css3鼠标滑过图片文字遮罩动画特效 纯css3鼠标滑过图片文字遮罩动画特效 纯css3鼠标滑过图片文字遮罩动画特效 纯css3鼠标滑过图片文字遮罩动画特效
纯CSS3鼠标滑过图片文字动画特效
CSS控制表单样式 CSS控制表单样式 01 CSS控制表单样式 使用CSS可以轻松地控制表单控件的样式,主要体现在控制表单控件的字体、边框、背景和内边距等。 CSS控制表单样式 由于form是块元素,重置浏览器的默认样式时,...
css3文字特效_css3火焰文字_css3文字渐变代码
方法一:用CSS截断字符串:IE,FireFox,Opera ,Safari都兼容 .subLongText{ width:150px; height:24px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; text-overflow: ellipsis;/* IE/Safari */ ...
自己输入一个字符串,字符串中可以包括字符和汉字,截取指定的字符串
用css来实现自动截取文字,不需要后台程序和JS的使用。
css3鼠标滑过图片文字动画特效是一款常用的5种纯css3实现的鼠标滑过图片动画效果。
CSS代码实现背景透明而文字不透明,兼容支持火狐、360、谷歌、IE6-IE11等浏览器
CSS控制漂亮的缩略图样式CSS控制漂亮的缩略图样式CSS控制漂亮的缩略图样式CSS控制漂亮的缩略图样式CSS控制漂亮的缩略图样式CSS控制漂亮的缩略图样式
css3翻转文字css3翻转文字css3翻转文字css3翻转文字css3翻转文字
css3 animation酷炫的文字动画特效 css3 animation酷炫的文字动画特效
HTML中td元素的nowrap属性表示禁止单元格中的...项目中 ajax 应用需要动态创建element 但是在td内 内容过长 firefox 能自动换行,ie6 比较傻瓜的!可以如下设置TD的CSS即可实现 复制代码代码如下: <td xss=removed>
插件描述:20种配合场景的CSS3鼠标滑过文字动画特效. 参考示例:http://www.jq22.com/jquery-info5984
CSS3文字阴影实现乳白文字效果是一款有效利用css3的text-shadow属性,可以实现很多漂亮的效果。
5种css3鼠标滑过图片文字动画代码,鼠标滑过图片,有动画的代码。
这是一款使用纯css3制作的文字颜色渐变和文字阴影特效插件。通过该插件可以制作各种文字颜色渐变效果和文字阴影效果,它的文字阴影就像PS中的浮雕切边文字效果一样,非常好看。
纯css3艺术文字样式效果代码 纯css3艺术文字样式效果代码