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. mongodb 查询使用

    > db.jd_58tc_raw.findOne() { "_id" : "2659e4e4caf0504ec4362478e2ed57ca", &quo ...

  2. arm-linux-gcc 常用参数讲解 gcc编译器使用方法

    我们需要编译出运行在ARM平台上的代码,所使用的交叉编译器为 arm-linux-gcc.下面将arm-linux-gcc编译工具的一些常用命令参数介绍给大家.在此之前首先介绍下编译器的工作过程,在使 ...

  3. Failed to create the java virtual machine完全解决办法

    一直用EcliPSe开发java,突然有这么一天,无法启动了,splash窗口显示“Failed to create the Java Virtual Machine”,结果发现eclipse和mye ...

  4. oracle中统计重复几次的数据有几条

    源地址:http://zhidao.baidu.com/link?url=ZgCztNzCScRI5kAqGqug1LJvf7IX311EQs6fJ0-W1kOtWaaR7MrtLoV_228Ed8F ...

  5. Play framework(二)

    Play 2.0 的完整演示过程记录 http://www.oschina.net/translate/playframework-20-live-coding-script todolist代码

  6. JAVA中IO总结

    JAVA中IO流主要分为两大类: 字节流:InputStream+OutputStream 字符流:Reader+Writer 字节流: InputStream是所有字节输入流的父类 OutputSt ...

  7. javascript闭包的一个例子

    <html> <head> <title>elementFromPoint</title> <script type="text/jav ...

  8. 如何激活phpstorm | phpstorm的下载

    2016年7月14日 phpsotrm 推送2016.2 更新 phpstorm的下载地址 https://www.jetbrains.com/phpstorm/download/#section=w ...

  9. [AFUI]App Framework Plugins

    ---------------------------------------------------------------------------------------------------- ...

  10. windows 创建服务提示失败 5 拒绝 访问拒绝

    1.桌面创建文本,输入 sc create .....echo. & pause 保存,重命名为   .bat 2.右键该文件,管理员运行