有些时候我们在使用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. HttpClient中异步方法的同步调用

    在System.Net.Http中,提供了使用Http与远程服务器通讯的httpClient,但是里面都是异步方法,有时候我们并不需要使用异步操作.这个时候可以使用如下的方式来进行同步调用. clas ...

  2. CDZSC_2015寒假新人（2）——数学 B

    B - B Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Submit Status ...

  3. 一台nginx服务器多域名配置 （转）

    Nginx强大的正则表达式支持,可以使server_name的配置变得很灵活,如果你要做多用户博客,那么每个用户拥有自己的二级域名也就很容易实现了. 下面我就来说说server_name的使用吧: s ...

  4. PK投票效果

    /** *createTime:2015-07-21 *updateTime:2015-06-22 *author:刘俊 *Description:PK投票 *phone:13469119119 ** ...

  5. select操作

    // 1.判断select选项中 是否存在Value="paraValue"的Item         function jsSelectIsExitItem(objSelect, ...

  6. C# XML序列化帮助类代码

    public static class XmlHelper { private static void XmlSerializeInternal(Stream stream, object o, En ...

  7. javacc

    http://www.cnblogs.com/Gavin_Liu/archive/2009/03/07/1405029.html https://javacc.java.net/ http://www ...

  8. 利用SQL Profiler处理开销较大的查询

    当SQL Server的性能变差时,最可能发生的是以下两件事: 首先,某些查询产生了系统资源上很大的压力.这些查询影响整个系统的性能,因为服务器无法足够快速地服务其他SQL查询. 另外,开销较大的查询 ...

  9. 【在Windows下进行的编程人员，你真的需要学习下Linux】

    从业几年,发现好多编程人员,严重依赖UI工具.对一些命令操作,十分的反感.尤其是从事Windows系统中的程序开发的人员.由于微软对开发工具,编程套件的极限优化.开发出更多的 面向UI的开发工具.从V ...

  10. UESTC_韩爷的情书 2015 UESTC Training for Graph Theory<Problem H>

    H - 韩爷的情书 Time Limit: 6000/2000MS (Java/Others)     Memory Limit: 262144/262144KB (Java/Others) Subm ...