CSS+DIV实现文字一行内显示，并且过多的文字以点来代替
有些时候我们在使用CSS+DIV进行排版实现大量的文字的时候，为了页面的美观，这里需要将文字在div中一行显示，并且将过多的文字进行隐藏，以点号进行代替。当鼠标放上面的时候会以title的形式显示所有的内容。
如下图所示为使用样式排版之前的效果：
如下图所示为使用样式排版之后的效果：
明显下面的效果图要比之前友好实用多了。
如下为源码：
<!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>
<title></title>
<script src="../JavaScript/jquery-1.8.3.min.js" type="text/javascript"></script>
<style type="text/css">
#test
{
width: 530px;
height: 500px;
background-color: Blue;
}
.content
{
width: 100px;
background-color: Gray;
float: left;
border: 1px solid red;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<center>
<div id="test">
<div class="content" title="测试测试测试测试测试测试测试">
<input type="radio" /><span>测试测试测试测试测试测试测试</span>
</div>
<div class="content" title="测试测试测试测试测试测试测试">
<input type="radio" /><span>测试测试测试测试测试测试测试</span>
</div>
<div class="content" title="测试测试测试测试测试测试测试">
<input type="radio" /><span>测试测试测试测试测试测试测试</span>
</div>
<div class="content" title="测试测试测试测试测试测试测试">
<input type="radio" /><span>测试测试测试测试测试测试测试</span>
</div>
<div class="content" title="测试测试测试测试测试测试测试">
<input type="radio" /><span>测试测试测试测试测试测试测试</span>
</div>
<div class="content" title="测试测试测试测试测试测试测试">
<input type="radio" /><span>测试测试测试测试测试测试测试</span>
</div>
<div class="content" title="测试测试测试测试测试测试测试">
<input type="radio" /><span>测试测试测试测试测试测试测试</span>
</div>
</div>
</center>
</body>
</html>
对以上源码的部分解释
css中white-space:nowrap主要是控制文字能够在div中一样显示，不换行，overflow：hidden和text-overflow:ellipsis则是对于过多的文字进行隐藏并且将多余的文字以点号进行代替。这里鼠标放在div上的时候能够显示所有的文字，主要是通过div的title属性进行实现的。
CSS+DIV实现文字一行内显示，并且过多的文字以点来代替的更多相关文章
- 用CSS让字体在一行内显示不换行（收藏）
当一行文字超过DIV或者Table的宽度的时候,浏览器中默认是让它换行显示的,如果不想让他换行要怎么办呢? 用CSS让文字在一行内显示不换行的方法 一般的文字截断(适用于内联与块): .text- ...
- 用CSS让字体在一行内显示不换行
青枫 , 2012/07/13 18:08 , css样式设计 , 评论(0) , 阅读(2189) , Via 本站原创 大 | 中 | 小 当一行文字超过DIV或者Table的宽度的时候,浏览器 ...
- CSS控制字体在一行内显示不换行
当一行文字超过DIV或者Table的宽度的时候,浏览器中默认是让它换行显示的,如果不想让他换行要怎么办呢?用CSS让文字在一行内显示不换行的方法: 一般的文字截断(适用于内联与块): .text-ov ...
- CSS强制文本在一行内显示若有多余字符则使用省略号表示
这篇文章主要介绍了强制文本在一行内显示,多余字符使用省略号,设置或检索是否使用一个省略标记(...)标示对象内文本的溢出.对应的脚本特性为textOverflow 设置或检索是否使用一个省略标记(.. ...
- CSS控制文本在一行内显示，若有多余字符则使用省略号表示
强制文本在一行内显示,多余字符使用省略号 text-overflow: ellipsis; overflow: hidden; white-space: nowrap;
- white-space norma nowrap强制同一行内显示所有文本文字，让所有文字内容中一排显示不换行
日常我们为了让文字内容在一行内显示完,哪怕宽度不够也不能换行,我们可以使用white-space样式,但如果遇到了html br强制换行标签,无论是设置white-space与否都会被<br&g ...
- CSS浮动属性，知道原理就很简单,灵活控制块级元素在一行内显示
在页面布局中,有两个非常常用的CSS属性.它们巧妙的控制着块级元素们之间的位置,灵活的让块级元素在一行内显示或者另起一行.说到这里,相信大家已经猜出来了,这两个属性就是控制块级元素浮动的属性.整个页面 ...
- css让文字在一行内显示
1.例如 p元素,里面的文字不换行显示,超出部分不隐藏 p{ width:100px; word-break:keep-all; white-space:nowrap; } 2.例如 p元素,里面的文 ...
- css 一行内显示 超出自动隐藏
一般的文字截断(适用于内联与块): Example Source Code [www.mb5u.com].text-overflow {display:block;/*内联对象需加*/width:31 ...
随机推荐
- POJ 1269 - Intersecting Lines 直线与直线相交
题意: 判断直线间位置关系: 相交,平行,重合 include <iostream> #include <cstdio> using namespace std; str ...
- 不到30行JS代码实现的Excel表格
不到30行JS代码实现的Excel表格,jQuery并非不可替代 某国外程序员展示了一个由原生JS写成不依赖第三方库的,Excel表格应用,有以下特性: 由不足30行的原生JavaScript代码实现 ...
- HTML+CSS学习
1.彻底弄懂CSS盒子模式(DIV布局快速入门) 2.在CSS中,BOX的Padding属性的数值赋予顺序为padding:10px; 四个内边距都是10px padding:5px 10px; 上下 ...
- 【Mysql 调用存储过程，输出参数的坑】
玛德,数据行都返回过来了,就是没有输出参数!!! 扒官方设计文档:这么一段 雷死人了!!! When a stored procedure is called using MySqlCommand.E ...
- html5视频小站
本文目的 练习HTML5 学习css3新特性 学习和熟悉移动html基础开发,如触摸知识 网站特点 界面设计仿360影视移动网站 支持主流现代浏览器(注:IE9,chrome,firefox.safa ...
- 使用sae定时执行Python脚本
使用sae定时执行Python脚本 使用sae定时执行Python脚本 12,May,2014 | 57 Views 毕设压力略大,必须是桂林游的锅.去之前放松了几天,回来又休闲了几天,加上桂林的一周 ...
- Difference Between Mod_Python & Mod_Wsgi | eHow
Difference Between Mod_Python & Mod_Wsgi | eHow x YES NO Why not? Thanks for he ...
- ListView开发笔记
一.ListView有背景,ListItem 透明,但是在点击.拖动时变成白色 android:cacheColorHint="#0000"
- Python 自动化脚本学习（三）
函数 例子 def hello(): print("hello" + "world"); 有参数的函数 def hello(name): print(" ...
- 命令行分析java线程CPU占用
1.使用top命令找出占用cpu最高的JAVA进程pid号 2. 找出占用cpu最高的线程: top -Hp -n 1 3. 打印占CPU最高JAVA进程pid的堆栈信息 jstack pid &g ...