Bootstrap的响应式,当文字超过div长度,换行问题的处理!
(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长度,换行问题的处理!的更多相关文章
- Metronic – 超赞!基于 Bootstrap 的响应式后台管理模板
Metronic 是一套精美的响应式后台管理模板,基于强大的 Twitter Bootstrap 框架实现.Metronic 拥有简洁优雅的 Metro UI 风格界面,6 种颜色可选,76 个模板页 ...
- Django中间件,CSRF(跨站请求伪造),缓存,信号,BootStrap(模板)-响应式(栅格)+模板
Django中间件,CSRF(跨站请求伪造),缓存,信号,BootStrap(模板)-响应式(栅格)+模板 1.中间件(重要): 在Django的setting中有个MIDDLEWARE列表,里面的东 ...
- Bootstrap实战 - 响应式布局
一.介绍 响应式布局就是一个网站能够兼容多个终端,而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网浏览而诞生的. 导航栏与轮播在大部分网站的头部占很高的比重,特别是导航栏,扮演着网站地图的 ...
- bootstrap固定响应式导航
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap. ...
- Bootstrap之响应式导航栏
代码: <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8 ...
- Bootstrap页面响应式设计
关键词:viewport.栅格布局.媒体查询(Media Queries) 一.关于栅格布局的说明: 1.基本图解 extra small devices phones 超小型设备手机small d ...
- 关于bootstrap和响应式布局
bootstrap导入 首先需要安装好插件 然后就是在代码器写导入代码 代码如下 <html lang="zh-CN"> <head> <meta c ...
- 基于 Bootstrap 的响应式后台管理面板
你想建立一个后台管理面板或者分析仪表板吗?不需从头开始,Keen IO Bootstrap 是一个响应式的仪表盘模板,可以帮助你在几分钟内呈现数据,让你可以创建一个有吸引力的,定制的分析仪表板,随时可 ...
- 基于ASP.NET MVC和Bootstrap搭建响应式个人博客站(一)
1.0 为什么要做这个博客站? www.zynblog.com 在工作学习中,经常要搜索查找各种各样的资料,每次找到相关资料后都会顺手添加到浏览器书签中,时间一长,书签也就满了.而且下次再点击这个 ...
随机推荐
- Hadoop学习笔记-HDFS命令
进入 $HADOOP/bin 一.文件操作 文件操作 类似于正常的linux操作前面加上“hdfs dfs -” 前缀也可以写成hadoop而不用hdfs,但终端中显示 Use of this scr ...
- Jasper_plug_install
1.open eclipse -> Help -> Eclipse Marketplace. 2.at new window, find jasper, will find Jaspers ...
- 在Ubuntu上安装VmTools
1.添加VmTools 2.解压 .tag.gz文件 使用Linux命令: tar –zxvf src –c dis -c: 建立压缩档案 -x:解压 -t:查看内容 -r:向压缩归档文件末尾追加文件 ...
- android:layout_gravity="bottom"不起作用问题
布局layout时, 发现设置了android:layout_gravity="bottom"后view并没有底对齐, 查了下, 原来如下: 对于 LinearLayout 当 a ...
- (转载)Setup Factory 会话变量
本文转自http://www.cnblogs.com/lzjsky/archive/2010/11/18/1880440.html 方便今后查询 Session variables are speci ...
- java设计模式--结构型模式--适配器模式
适配器模式 概述 将一个类的接口转换成客户希望的另外一个接口.Adapter模式使得原本由于接口不兼容而不能一起工作的那些类可以一起工作. 适用性 1.你想使用一个已经存在的类,而它的接口不符合你的需 ...
- C/C++四种退出线程的方法
退出线程可以有四种方法: 1.线程函数的return返回(最好这样): 其中用线程函数的return返回, 而终止线程是最安全的, 在线程函数return返回后, 会清理函数内申请的类对象, 即调用这 ...
- C++初始化列表问题
C++初始化列表问题,类中有一个对象类型的数组成员变量,在初始化列表中初始化时报错“[]”操作符语法错误 class ClassA{private ClassB arrayOfObjectClassB ...
- poj 3498 March of the Penguins(最大流+拆点)
题目大意:在南极生活着一些企鹅,这些企鹅站在一些冰块上,现在要让这些企鹅都跳到同一个冰块上.但是企鹅有最大的跳跃距离,每只企鹅从冰块上跳走时会给冰块造成损害,因此企鹅跳离每个冰块都有次数限制.找出企鹅 ...
- 第11讲- Android中进程及其优先级
第11讲Android中进程及其优先级 进程与线程: 进程:操作系统结构的基础,资源分配的最小单元,一个操作系统包括多个进程: 线程:线程存在于进程当中,是操作系统调试执行的最小单元,一个进程包括多个 ...