有些时候我们在使用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. （原）使用intel的ipp库计算卷积及相关

    转载请注明出处: http://www.cnblogs.com/darkknightzh/p/5462631.html 参考网址: https://software.intel.com/zh-cn/n ...

  2. css让图片居中显示在手机屏幕上

    直接上代码了 <div class="showpic"> <span></span> <img src="" alt= ...

  3. haproxy之配置文件解析

    功能--> 提供高可用/负载均衡/基于tcp和http应用的代理;支持虚拟主机,特别适用于负载特大的web站点. 配置文件解析--> #配置文件-->开启/proc/net/ipv4 ...

  4. 2013年9月份阿里JAVA面试经历

    面试时间:2013-9 面试地点:合工大 面试内容: 1. struts2怎么实现的,原理是什么 2. session是怎么实现的?存储在哪里? 3. Java怎么创建链表的? 定义一个结点类,再定义 ...

  5. mysql----二进制包安装

    1.增加mysql用户 useradd mysql 2.解压mysql 二进制包到/usr/local/ -linux-glibc2.-x86_64.tar.gz -C/usr/local/ 3.创建 ...

  6. 利用Azure Automation实现云端自动化运维(3)

    Azure automation的认证方式:证书   该种方式是推荐的进行Automation认证的方式,好处在于安全性高,过期时间由自己控制,不好的地方在于大家在Windows上要生成证书比较麻烦, ...

  7. js去除左右空格

     replace方法去掉字符串的空格 //去左空格; s=s.replace(/(^\s*)/g, ""); //去右空格; s= s.replace(/(\s*$)/g, &qu ...

  8. [WPF]ListView点击列头排序功能实现

    [转]   [WPF]ListView点击列头排序功能实现 这是一个非常常见的功能,要求也很简单,在Column Header上显示一个小三角表示表示现在是在哪个Header上的正序还是倒序就可以了. ...

  9. 线程初步了解 - <第一篇>

    操作系统通过线程对程序的执行进行管理,当操作系统运行一个程序的时候,首先,操作系统将为这个准备运行的程序分配一个进程,以管理这个程序所需要的各种资源.在这些资源之中,会包含一个称为主线程的线程数据结构 ...

  10. javascript之尺寸，位置，溢出

    一.offsetWidth:元素的宽度,包括边框,内容,内边距. 二.offsetHeight:元素的高度,包括边框,内容,内边距. 三.offsetLeft:元素的X坐标(相对于最近已定位的祖先元素 ...