(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. android 真机调试出现错误 INSTALL_FAILED_INSUFFICIENT_STORAGE 的解决方法。

    关于这个神奇的 内存不够错误的通常解决方法,网上大把,建议大家在尝试过了网上的方法后再来尝试下我的这种方法. 编译工具: android studio 测试真机:米 2 调试的时候出现:INSTALL ...

  2. Android入门(八)广播

    原文链接:http://www.orlion.ga/572/ 一.广播机制 Android中的每个应用程序都可以对自己感兴趣的广播进行注册,这样该程序就只会接收到自己所关心的广播内容,这些广 播可能是 ...

  3. dr.wondr博士随笔之三星某古董智能机GTXXXX 的取证恢复一例

    大家好!欢迎来到我dr.wonde博士的微博! 这是dr.wonde的第一篇微博,不足之处,还请见谅. 今天dr.wonde给你们带来不可能的数据恢复任务之三星非智能机古董机GT-E1088C 的恢复 ...

  4. 关于Warn:name or service not known的解决办法

    由于之前搭建起了一个集群,然后直接将相应的配置文件复制过来 , 发现出现了 Warn:name or service not known 的问题,导致无法启动datanode. 解决的办法就是将sal ...

  5. Codeforces Round #141 (Div. 2)

    A. Is your horseshoe on the other hoof? 模拟题意. B. Two Tables 暴力枚举\(x,y\). C. Fractal Detector 显然,判断图形 ...

  6. MyBatis SQL xml处理小于号与大于号

    MyBatis SQL xml处理小于号与大于号 当我们需要通过xml格式处理sql语句时,经常会用到< ,<=,>,>=等符号,但是很容易引起xml格式的错误,这样会导致后台 ...

  7. 如何让windows服务器IIS支持.apk/.ipa文件下载

    打开IIS服务管理器,找到服务器,右键-属性,打开IIS服务属性: 单击MIME类型下的“MIME类型”按钮,打开MIME类型设置窗口: 单击“新建”,建立新的MIME类型: 扩展名是:.apk MI ...

  8. bzoj 2876: [Noi2012]骑行川藏 拉格朗日数乘

    2876: [Noi2012]骑行川藏 Time Limit: 20 Sec  Memory Limit: 128 MBSec  Special JudgeSubmit: 1033  Solved: ...

  9. Android之AlertDialog.Builder详解

    import android.app.Activity; import android.app.AlertDialog; import android.content.DialogInterface; ...

  10. C#获取当前路径的几种方法

    C#获取当前路径的方法如下: 1. System.Diagnostics.Process.GetCurrentProcess().MainModule.FileName -获取模块的完整路径. 2. ...