有些时候我们在使用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. codeforces 340D Bubble Sort Graph（dp,LIS）

    转载请注明出处: http://www.cnblogs.com/fraud/          ——by fraud  Bubble Sort Graph Iahub recently has lea ...

  2. HibernateTemplate用法

    private HibernateTemplate hibernateTemplate; 使用HbernateTemplate HibernateTemplate提供持久层访问模板化,使用Hibern ...

  3. putty设置

    1- 输入要链接的主机地址 2- 设置connection-->SSH-->Tunnels 点击Add 3- 设置connection 修改为30 4- 点击open,出现ssh登陆,输入 ...

  4. [转]如何正确设置nginx中remote_addr和x_forwarded_for参数

    做网站时经常会用到remote_addr和x_forwarded_for这两个头信息来获取客户端的IP,然而当有反向代理或者CDN的情况下,这两个值就不够准确了,需要调整一些配置. 什么是remote ...

  5. information_schema.engines学习

    当前mysql实例的存储引擎信息可以从information_schema.engines 中查询到 例子: mysql> select * from information_schema.en ...

  6. hdu 1208 Pascal's Travels

    http://acm.hdu.edu.cn/showproblem.php?pid=1208 #include <cstdio> #include <cstring> #inc ...

  7. archlinux相关资料整理

    Arch linux Arch Linux Wiki Arch linux Wiki Markdown Arch Wiki python continuing ...

  8. 基于 Bootstrap 的扁平化 UI 开发包

    Flat UI是一款基于Bootstrap的扁平化前端UI工具包,Flat UI的组件外观设计非常清新和漂亮,Flat UI的组件包含按钮,输入框,组合按钮,复选框,单选按钮,标签,菜单,进度条和滑块 ...

  9. Path Sum II 解答

    Question Given a binary tree and a sum, find all root-to-leaf paths where each path's sum equals the ...

  10. MSSQL 常用内置函数

    一.判断表是否存在 IF objectproperty(object_id(@tableName),'IsUserTable') IS NOT NULL PRINT '存在' ELSE PRINT ' ...