(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. bootstrap固定响应式导航

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

  3. 关于bootstrap和响应式布局

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

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

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

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

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

  6. Bootstrap禁用响应式布局

    在Bootstrap中极其重要的一个技术内容便是响应式布局了,一次编码针对不同设备终端的强大能力使得响应式技术愈发流行. 不过正所谓"萝卜青菜各有所爱",如果你想要使用Bootst ...

  7. 使用bootstrap建立响应式网页——头部导航栏

    1.要建立响应式网站的布局,这个时候bootstrap的高级就能体现出来了. 2.先来了解一下bootstrap提供了哪些响应式工具供我们使用: (1)屏幕宽度尺寸的概念: <768px     ...

  8. 使用bootstrap建立响应式网页——通栏轮播图(carousel)

    1.bootstrap提供了js插件——轮播图 我们还是照旧,直接拿过来用,需要改的地方再说. 2.修改 小屏幕看小图,大屏图看大图:这个可以利用自定义属性(data-XXX)data-img-lg( ...

  9. bootstrap建立响应式网站——tab选项卡

    1.bootstrap给我们提供了标签页 细细看了一下bootstrap的标签页源码,对tab选项卡有了更深的理解.其实说来也简单,以前自己写js和css时没有意识到整体的划分.就是分为两部分:一部分 ...

随机推荐

  1. Alpha总结

    一.预期计划 1.时间:11月7日--11月17日 2.小组分工 角色:程序员.美工.文档.测试 这个阶段以编码为主,每个组员参与编码,同时各自根据自己擅长的方面主要负责一个部分. 项目编码工作分工: ...

  2. PHPUnit入门

    PHPUnit是PHP语言的单元测试框架.工具,xunit单元测试工具系列成员之一,可以单独运行在Linux或windows系统下面,也可以集成到zend studio等IDE工具中. 工具下载:ht ...

  3. yii2框架增删改查案例

    //解除绑定蓝牙 //http://www.520m.com.cn/api/pet/remove-binding?healthy_id=72&pet_id=100477&access- ...

  4. PHP-递归扫描目录和删除目录

    (1) 通过递归扫描目录并打印 // php递归扫描目录 function scanMyDir($path){ // 打开目录 $dh = opendir($path); echo '<ul&g ...

  5. SQL Server逻辑读、预读和物理读

    SQL Server数据存储的形式 预读:用估计信息,去硬盘读取数据到缓存.预读100次,也就是估计将要从硬盘中读取了100页数据到缓存. 物理读:查询计划生成好以后,如果缓存缺少所需要的数据,让缓存 ...

  6. C# 非UI线程对控件的控制

    第一步:定义委托 public delegate void wei(string ss); 第二步:控制UI的方法 public void get1(string ss) { richTextBox1 ...

  7. 一道常被人轻视的前端JS面试题(转)

    分享下我曾经出过的一道面试题,此题是我出的一套前端面试题中的最后一题,用来考核面试者的JavaScript的综合能力,很可惜到目前为止的将近两年中,几乎没有人能够完全答对,并非多难只是因为大多面试者过 ...

  8. 【C#进阶系列】00 序

    老早就被各种推荐<CLR via C#>这本书了,然而一直没去学. 因为工作中所需要的.NET功底目前算是足以应付了,而前端却不熟,所以跑去学了一段时间前端的知识. 终于算是把前端方面的基 ...

  9. poj 1845 数论综合

    题意:求A^B的所有因数的和 mod 9901 sol:一开始毫无思路,因为很多定理都不知道-_-|| 1. 整数的唯一分解定理: 任意正整数都有且只有一种方式写出其素因子的乘积表达式. A=(p1^ ...

  10. 【ipython技巧】使用shell命令

    在ipython终端时,可能临时需要使用shell命令进行简单处理: 可以在shell命令前面使用 !(感叹号) 比如在win7,ipython下想要使用sublime新建一个py,可以这样 !sub ...