(1)overflow: hidden
overflow 属性规定当内容溢出元素框时发生的事情。这个属性定义溢出元素内容区的内容会如何处理。hidden 表示内容会被修剪,并且剪掉的内容是不可见的。

(2)white-space: nowrap
规定文本不进行换行。white-space 属性设置如何处理元素内的空白。nowrap 表示文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。

(3)text-overflow: ellipsis
text-overflow 属性规定当文本溢出包含元素时发生的事情。ellipsis 表示显示省略符号来代表被修剪的文本。

(4)width:100px
width 属性设置div的长度,值得一提的是在响应式中,width是根据lg,md,sm,xs自动设定的无需操作;(我们的优化相当于处理元素内部的间距部分的空白);

(4)eg:

#main_content a{

   width:31px;

   display:none;内联是使用;
        word-break:keep-all;/* 不换行 */只能在半角空格或连字符处换行。
        white-space:nowrap;/* 不换行 */
        overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
        text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ;需与overflow:hidden;一起使用。*/
        }

Bootstrap的响应式,当文字超过div长度,换行问题的处理!的更多相关文章

  1. Metronic – 超赞!基于 Bootstrap 的响应式后台管理模板

    Metronic 是一套精美的响应式后台管理模板,基于强大的 Twitter Bootstrap 框架实现.Metronic 拥有简洁优雅的 Metro UI 风格界面,6 种颜色可选,76 个模板页 ...

  2. Django中间件,CSRF(跨站请求伪造),缓存,信号,BootStrap(模板)-响应式(栅格)+模板

    Django中间件,CSRF(跨站请求伪造),缓存,信号,BootStrap(模板)-响应式(栅格)+模板 1.中间件(重要): 在Django的setting中有个MIDDLEWARE列表,里面的东 ...

  3. Bootstrap实战 - 响应式布局

    一.介绍 响应式布局就是一个网站能够兼容多个终端,而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网浏览而诞生的. 导航栏与轮播在大部分网站的头部占很高的比重,特别是导航栏,扮演着网站地图的 ...

  4. bootstrap固定响应式导航

    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap. ...

  5. Bootstrap之响应式导航栏

    代码: <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8 ...

  6. Bootstrap页面响应式设计

    关键词:viewport.栅格布局.媒体查询(Media Queries) 一.关于栅格布局的说明: 1.基本图解 extra small devices phones  超小型设备手机small d ...

  7. 关于bootstrap和响应式布局

    bootstrap导入 首先需要安装好插件 然后就是在代码器写导入代码 代码如下 <html lang="zh-CN"> <head> <meta c ...

  8. 基于 Bootstrap 的响应式后台管理面板

    你想建立一个后台管理面板或者分析仪表板吗?不需从头开始,Keen IO Bootstrap 是一个响应式的仪表盘模板,可以帮助你在几分钟内呈现数据,让你可以创建一个有吸引力的,定制的分析仪表板,随时可 ...

  9. 基于ASP.NET MVC和Bootstrap搭建响应式个人博客站(一)

    1.0 为什么要做这个博客站? www.zynblog.com   在工作学习中,经常要搜索查找各种各样的资料,每次找到相关资料后都会顺手添加到浏览器书签中,时间一长,书签也就满了.而且下次再点击这个 ...

随机推荐

  1. js修改window对象中的url历史记录

    //页面地址:http://localhost/11/account.html//访问页面后,地址变为:http://localhost/11/account.html?type=banana con ...

  2. 开源日志系统 log4c 使用心得+总结

    http://blog.csdn.net/sky_qing/article/details/7208645 一.安装: 我看网上好多人介绍log4c安装的时候都说有两个步骤:先下载expat安装包并安 ...

  3. 163k地方门户网站系统自动审核信息脚本

    本代码实现对163k地方门户网站系统发布信息的自动审核,以及对内容中链接全过滤 软件安装 Python 安装 http://www.python.org/download/ pymssql安装 htt ...

  4. Java Web开发及应用软件方向的学习计划

    从接触计算机以来,一直抱有很浓厚的兴趣.我并不擅长与人交际,与机器对话可能更有性格方面的优势.虽然我很想做出一些改变,但总得需要时间和历练,暂时也只能这样了~ 一直很向往代码的神秘,在梦之站待过两年时 ...

  5. PowerShell 管道和对象成员

    2.1  管道 在各种现代的shell中,均支持管道的概念. 管道的最大特点就是:  前一个命令的输出作为后一个命令的输入.cmd.bash均支持管道的概念,这里我就不多说了,下面我们说说PS中 管道 ...

  6. android map高德地图显示多个点,并且每个marker点可以响应鼠标点击事件,处理跳转页面

    定义一个数组,然后将要显示的markers放进数组里面,让后循环每个marke对象,赋予监听事件,在监听事件里面写其它需要的功能: js举例: var arr = new Arry(); var ma ...

  7. grep详解

    一.简介 Global Regular Expression Print,是一种强大的文本搜索工具,能使用正则表达式. 二.语法 grep [OPTIONS] PATTERN [FILE...]gre ...

  8. yii第一个应用blog

    1. 连接到数据库 大多数 Web 应用由数据库驱动,我们的测试应用也不例外.要使用数据库,我们首先需要告诉应用如何连接它.修改应用的配置文件 WebRoot/testdrive/protected/ ...

  9. 【Android】使用BaseAdapter实现复杂的ListView

    步骤 使用BaseAdapter实现复杂的ListView的步骤: 1. 数据你要准备好 List getData(). 2. 继承ListActivity专有屏,不再需要setContentView ...

  10. Thinkpad E430+CentOS 6.4+ linux-3.10.12内核网卡驱动(无线+有线)配置

    配置并编译安装内核模块和内核后,解压附件 firmware.tar.bz2,拷贝其中的rtlwifi文件夹到/lib/firmware下,然后 执行装载内核模块命令: sudo modprobe rt ...