有些时候我们在使用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实现文字一行内显示，并且过多的文字以点来代替的更多相关文章

  1. 用CSS让字体在一行内显示不换行（收藏）

    当一行文字超过DIV或者Table的宽度的时候,浏览器中默认是让它换行显示的,如果不想让他换行要怎么办呢? 用CSS让文字在一行内显示不换行的方法   一般的文字截断(适用于内联与块): .text- ...

  2. 用CSS让字体在一行内显示不换行

    青枫 , 2012/07/13 18:08 , css样式设计 , 评论(0) , 阅读(2189) , Via 本站原创 大 | 中 | 小  当一行文字超过DIV或者Table的宽度的时候,浏览器 ...

  3. CSS控制字体在一行内显示不换行

    当一行文字超过DIV或者Table的宽度的时候,浏览器中默认是让它换行显示的,如果不想让他换行要怎么办呢?用CSS让文字在一行内显示不换行的方法: 一般的文字截断(适用于内联与块): .text-ov ...

  4. CSS强制文本在一行内显示若有多余字符则使用省略号表示

    这篇文章主要介绍了强制文本在一行内显示,多余字符使用省略号,设置或检索是否使用一个省略标记(...)标示对象内文本的溢出.对应的脚本特性为textOverflow 设置或检索是否使用一个省略标记(.. ...

  5. CSS控制文本在一行内显示，若有多余字符则使用省略号表示

    强制文本在一行内显示,多余字符使用省略号 text-overflow: ellipsis; overflow: hidden; white-space: nowrap;

  6. white-space norma nowrap强制同一行内显示所有文本文字，让所有文字内容中一排显示不换行

    日常我们为了让文字内容在一行内显示完,哪怕宽度不够也不能换行,我们可以使用white-space样式,但如果遇到了html br强制换行标签,无论是设置white-space与否都会被<br&g ...

  7. CSS浮动属性，知道原理就很简单,灵活控制块级元素在一行内显示

    在页面布局中,有两个非常常用的CSS属性.它们巧妙的控制着块级元素们之间的位置,灵活的让块级元素在一行内显示或者另起一行.说到这里,相信大家已经猜出来了,这两个属性就是控制块级元素浮动的属性.整个页面 ...

  8. css让文字在一行内显示

    1.例如 p元素,里面的文字不换行显示,超出部分不隐藏 p{ width:100px; word-break:keep-all; white-space:nowrap; } 2.例如 p元素,里面的文 ...

  9. css 一行内显示 超出自动隐藏

    一般的文字截断(适用于内联与块): Example Source Code [www.mb5u.com].text-overflow {display:block;/*内联对象需加*/width:31 ...

随机推荐

  1. 链表中倒数第K个节点

    问题描述: 找出链表中倒数第K个节点 思路分析: 用两个指针,一前一后,保持k个距离,前面的指针移动到末尾,后面的指针就刚好直到第k个节点, 要考虑到k为0,倒数第k个节点不存在的情况. 参考代码: ...

  2. SQL语句 计算某段时间工作日的天数（除了周六日）

    --只是加了固定日期,可以根据需求给成变量形式(BY 少年工藤) -思路:根据日期区间循环判断每一天是周日(1).周六(7)不变,其他加1 1 DECLARE @DAY DATE,@COUNT INT ...

  3. Lucene学习总结之四：Lucene索引过程分析

    对于Lucene的索引过程,除了将词(Term)写入倒排表并最终写入Lucene的索引文件外,还包括分词(Analyzer)和合并段(merge segments)的过程,本次不包括这两部分,将在以后 ...

  4. EcStore中的App是什么东西?

    Ecstore中的App不是手机上的App,它是一个Web应用包,集合了Web应用的后端PHP程序.Mysql数据表定义,以及前端HTML+CSS+JS展现,通常是实现某个业务功能,如购物车.促销.支 ...

  5. wordpress教程之如何修改与制作wordpress的作者页面

    一.如何使用与创建作者页面 一般情况下,多数主题下都有author.php这个文件,这既是作者展示页面.如果发现自己正在使用的主题中没有author.php这个文件的话, Wordpress 会默认寻 ...

  6. windows bat脚本编写

    windows批处理 (cmd/bat) 编程详解 开始之前先简单说明下cmd文件和bat文件的区别:在本质上两者没有区别,都是简单的文本编码方式,都可以用记事本创建.编辑和查看.两者所用的命令行代码 ...

  7. yii安装配置

    Yii 的安装由如下两步组成: 从 yiiframework.com 下载 Yii 框架. 将 Yii 压缩包解压至一个 Web 可访问的目录. 提示: 安装在 Web 目录不是必须的,每个 Yii ...

  8. UESTC_基爷的中位数 2015 UESTC Training for Search Algorithm & String<Problem D>

    D - 基爷的中位数 Time Limit: 5000/3000MS (Java/Others)     Memory Limit: 65535/65535KB (Java/Others) Submi ...

  9. 剑指offer-面试题15.链表中倒数第k个结点

    题目:输入一个链表,输出该链表的倒数第K个结点.为了符合大多数人的习惯,本题 从1开始计数,即链表的尾结点是倒数第1个节点.例如有一个链表有6个节点,从 头节点开始他们的值依次是1,2,3,4,5,6 ...

  10. sroHOBOorz来自HOBO的高精类

    /* bigint() bigint(long long) bigint(bigint) bigint(char*) bigint(string) +, +=, ++ -, -=, -- *, *= ...