有些时候我们在使用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. linux 系统下java开发环境的配置

    在安装之前,确保你的linux系统下有 jdk,jboss等相关软件 一.配置JDK环境变量 步骤: 解压缩JDK文件: unzip jdk1.6.0_31.zip 目录下显示文件夹jdk1.6.0_ ...

  2. (转)JAVA路径问题及命令行编译运行基础(linux下)

    原地址: http://blog.csdn.net/biaobiaoqi/article/details/6846274 java的运行机制的基本概念: 源文件 也就是我们熟知的.java文件. 类文 ...

  3. UIScrollView和UIPageControl学习使用

    # UIScrollView和UIPageControl # 概要 对于同一个页面需要展示很多图片信息.子视图等的这样的需求,我们可以采用控件UIScrollVIew,与之常常一起使用的控件是UIPa ...

  4. css 实现进度条

    <select id="progress" onchange="changeProgress(this)"> <option value=&q ...

  5. HTML5简单入门系列（六）

    前言 之前几篇已经将HTML5的主要新增元素和特性简单介绍完毕,LZ一直在犹豫还要不要把其他元素也写出来,因为其实没什么东西可以写,就是自己用到时看一下就行.不过为了入门系列的完整,犹豫再三,还是决定 ...

  6. MVC 中使用uploadify上传图片遇到的蛋疼问题

    MVC 中使用uploadify上传图片遇到的蛋疼问题 初次使用uploadify上传图片,遇到了一些比较纠结的问题,在这里和大家分享下,有不对的地方还望大神多多指教,希望对刚接触的朋友有所帮助,文采 ...

  7. JS中各种宽度、高度、位置、距离总结

    1.window.screen 浏览器与屏幕的距离,screenX(screenLeft),screenY(screenTop) 2.window.scrollTo(x,y) 将纵向滚动条移动到相对于 ...

  8. 从Qt4到Qt5的，主要的进化有三（对于QtWidget的精简和优化会很有限）

    从Qt4到Qt5的,主要的进化有三:1 语言的进化,原来是基于C++(qtwidget)和XML(.ui),现在添加了QML(QtQuick)+JS(v8)的架构.2 绘图系统的进化,原先基于QPai ...

  9. 【原创整理，基于JavaScript的创建对象方式的集锦】

    以下4种方式,是我在项目中最常见的JavaScript的面向对象的方式的开发. 测试一般在微软的工具:http://www.typescriptlang.org/Playground 进行测试,或者使 ...

  10. error: ‘shared_ptr’ in namespace ‘std’ does not name a type

    用G++编译项目的时候发生标题上的错误,原因是,这是c++ 11标准的.在给g++传递命令行的时候加上-std=c++0x就行了. 还需要在源码中#include<memory> 我的cm ...