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. 一起刑事案件法庭辩护 z

    [案件地位]  这是一起各方争议很大的刑事案件.侦查机关曾将该案以非法拘禁罪立案侦查,以故意杀人罪移送检察机关审查起诉,公诉机关以非法拘禁形成故意伤害(致死)起诉,而法院最终以故意伤害罪判决,并且排除 ...

  2. ubuntu 格式化U盘，并制作系统镜像

    1. 先要卸载U盘,使用如下命令: #umount /dev/sdb1 注意:/dev/后面的设备要根据你的实际情况而定,否则后面格式化,丢失数据!! 格式化U盘,并建立vfat文件系统 #mkfs. ...

  3. IRasterClassifyColorRampRenderer 使用时的一些奇怪的地方 (转)

    1.IRasterClassifyColorRampRenderer 的Break设置方法 IRasterClassifyColorRampRenderer这个接口是ArcEngine里对单波段栅格影 ...

  4. [ZOJ 1010] Area (计算几何)

    题目链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=1010 题目大意:给你n个点,问你顺次连线能否连成多边形?如果能, ...

  5. gnu c语言中的?:的作用

    #include <stdio.h> #include <stdlib.h> char * test() { return "abc" ?: "f ...

  6. webform中的Eval的使用

    <strong>.在前台html控件调用c#后台变量.</strong> 在后台的类代码里定义一个字符串.如 public partial class Index : Syst ...

  7. SVN-服务器搭建、apache2整合、eclipse使用

    如题,分成3个部分: 1.SVN服务器搭建.操作系统Ubuntu 14.04.2 LTS.具体方法度娘很多,不再细数. 安装:sudo apt-get install subversion 创建版本库 ...

  8. wmware10安装ghost win7问题处理

    随便找到了ghostwin7.iso, 先建立空的虚拟机, 加载iso, 按F2, 设置启动从光盘启动, 启动进去后点直安装Ghost镜像到C盘, 失盘, 直接跳到dos界面了. 忘记先要分区了, 使 ...

  9. [ 兼容 ] IE和Firefox的Javascript兼容性总结

    长久以来JavaScript兼容性一直是Web开发者的一个主要问题.在正式规范.事实标准以及各种实现之间的存在的差异让许多开发者日夜煎熬.为此,主要从以下几方面差异总结IE和Firefox的Javas ...

  10. 慕课网-安卓工程师初养成-4-11 Java循环跳转语句之 break

    来源:http://www.imooc.com/code/1431 生活中,我们经常会因为某些原因中断既定的任务安排.如在参加 10000 米长跑时,才跑了 500 米就由于体力不支,需要退出比赛.在 ...