1. Div内文本过长不换行

1.1 文本不换行 超出部分显示"..."

.style1

{

float:left;

white-space:nowrap;

text-overflow:ellipsis;

overflow: hidden;

}

1.2 文本不换行 超出部分隐藏

.style2

{

float: left;

white-space:nowrap;

overflow: hidden;

}

1.3文本不换行 超出时出现滚动条 拖动可查看全部内容

.style3

{

float:left;

white-space:nowrap;

}

1.4 根据Div宽度自动显示隐藏

应用实例：界面大小变化时，Div宽度变化，文字则根据Div的宽度显示或隐藏

样式：

.Name

{

float:left;

display:block;

white-space:nowrap;

text-overflow:ellipsis;

-o-text-overflow:ellipsis;

overflow: hidden;

}

最大宽度控制:

$(function () {

resize();

$(window).resize(function () {

resize();

});

}

function resize() {

var Width = window.Width;

if (Width>0) {

$('.Name').css({ "max-width": Width - 112 });//112是为左右相邻元素留出的固定宽度

}

}

2. Div不换行，自适应大小

2.1 多个div显示到1行的方法

除最右一个div外所有的div设置样式 float:left; 最右边一个样式设置可以 float:right;也可以 float:left;

2.2 页面缩小时，让排列在一行的3个div不换行

为中间的div固定宽度，当界面放大缩小时，动态调整左右两个div的宽度，使3个div占满整个页面，但不换行。

如果用百分比把3个div固定死，页面宽度缩小是还是会换行。要动态调整3个div的宽度：

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title></title>

<style>

.left {

float:left;

overflow:hidden;

background-color:yellow;

}

.center {

float:left;

background-color:pink;

width:360px;

}

.right {

float:left;

overflow:hidden;

background-color:blue;

}

</style>

<script src="Scripts/jquery-1.7.1.min.js"></script>

<script type="text/javascript">

$(function () {

resize();

window.onresize = resize;

});

function resize() {

var Width = $("#main").width();        //总宽度

var centerWidth = $(".center").width();//中间div的宽度

var lrWidth = Width - centerWidth;     //左右div的宽度总和

if (lrWidth < 0)

{

$(".left").hide();

$(".right").hide();

}//隐藏左右div

else {

$(".left").width(lrWidth / 2).show();

$(".right").width(lrWidth / 2).show();

}//设置宽度并显示左右div

}

</script>

</head>

<body>

<div style="width:100%;" id="main">

<div class="left">left</div>

<div class="center">center</div>

<div class="right">right</div>

</div>

</body>

</html>

3. div垂直居中

如果是单行文字想垂直居中，只要保证div高和行高保持一致：

css代码：

#div-a{

height:50px;

line-height:50px;

}

HTML代码：

<div id="div-a">

文字垂直居中

</div>

Div 不换行、垂直居中等样式的更多相关文章

  1. div垂直居中 css div盒子上下垂直居中

    div垂直居中 css div盒子上下垂直居中,让DIV盒子在任何浏览器中任何分辨率的显示屏浏览器中处于水平居中和上下垂直居中. div垂直居中常用于单个盒子,如一个页面里只有一个登录布局,使用div ...

  2. css3 flex 详解,可以实现div内容水平垂直居中

    先说一下flex一系列属性: 一.flex-direction: (元素排列方向) ※ flex-direction:row (横向从左到右排列==左对齐) ※ flex-direction:row- ...

  3. css固定宽高DIV内部元素垂直居中的方法

    应用案例 案例是这样的,一个外层div,高宽是固定的,但是里面内容不是固定的.很多朋友的做法是头部加一个padding或者margin,这样,里面内容显得貌似是居中了,但是假如内容变化,这样头部的固定 ...

  4. div+css:div中图片垂直居中

    div中图片垂直居中 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l ...

  5. 让DIV水平和垂直居中的几种方法

    我们在设计页面的时候,经常要把DIV居中显示,而且是相对页面窗口水平和垂直方向居中显示,如让登录窗口居中显示.我们传统解决的办法是用纯CSS来让DIV居中.在本文中,我将给大家讲述如何用CSS和jQu ...

  6. div水平居中与垂直居中的方法【摘自美浩工作室官方博客 】

    大家往往在写页面中会遇到不固定宽和高的div如果水平和垂直都居中呢?在写css的时候经常遇到的一个问题,当div没有固定的宽度或者高度的时候,如何才能让div水平或者垂直居中显示.如果div有固定宽度 ...

  7. div中字垂直居中对齐

    div中的文本水平居中,一般都是用text-align:center;就可以解决,那么垂直居中呢,知道vertiacl-align:middle;但有时候却不起作用:整理下div中文本垂直居中对齐的问 ...

  8. 【转】如何让DIV水平和垂直居中

    来源:http://blog.163.com/www.wxs_123/blog/static/82784664201321831746921/ 我们在设计页面的时候,经常要把DIV居中显示,而且是相对 ...

  9. 如何给div加一个边框border样式

    如何给div加一个边框样式? 对div盒子加一个边框样式很简单只需要使用border板块样式即可. 一.虚线与实线边框 边框虚线样式:dashed 边框实现样式:solid border:1px da ...

随机推荐

  1. DevExpress打印功能 z

    一.打印功能说明: 打印功能,我们有多种实现方式,可以根据需要自行选择,我简单的总结下两种方法. (1).使用微软.net框架自带的PrintDocument,这种方式是直接借助Graphics,自行 ...

  2. 修改VNC访问的密码

    :vncserver :iptables -I INPUT -p tcp --dport -j ACCEPT 客户端方式 :iptables -I INPUT -p tcp --dport -j AC ...

  3. FOOD

    Serving order of food courses(上菜顺序)1. Appetizer(starter)2. Main Course3. Dessert Style of cooking1. ...

  4. JAVA如何将PDF转换SWF格式的FLASH

    1. 需要用到的工具 SWFTools 下载地址 http://www.swftools.org/download.html,下载完成以后,直接安装就行  2.下面就是重点喽,详见Java代码解析 附 ...

  5. java程序内存使用

    一.内存使用示意图 二.java运行时数据区域 1.程序计数器: 当前线程所执行字节码的行号提示器. 2.java虚拟机栈: 线程私有,与线程生命周期相同,保存基本数据类型,如果线程所请求的栈深度大于 ...

  6. wait(0)

    public final synchronized void join(long millis) throws InterruptedException { long base = System.cu ...

  7. java学习___File类的查看和删除

    一.查看目录下的子目录或文件 getName()获取文件或目录的名字 for(File file:files) 如果想看目录下的另外目录,引用递归调用,就是还要在获取的目录下再查看目录 二.如何删除一 ...

  8. textarea文本换行和页面显示换行符

    在textarea里写的文本有换行,但是显示到页面后就不会自动换行,通过对数据分析发现textarea里的换行符是\n\r,然而HTML中的换行为<\br>解决办法有两种: 第一种:把文本 ...

  9. Delphi 在线程中如何使用TClientSocket组件并自动检测该组件

    在线程中如何使用TClientSocket组件并自动检测该组件的事件?我想在一个线程中动态创建一个TClientSocket组件,并要求该组件能够自动检测Socket事件(例如OnRead.OnErr ...

  10. poj 1804 （nyoj 117）Brainman ： 归并排序求逆序数

    点击打开链接 Brainman Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 7810   Accepted: 4261 D ...