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. Eclipse CDT 代码高亮配置

    效果图如下: 配置生效方式: 找到CDT的workspace目录中如下文件 X:\workspace\.metadata\.plugins\org.eclipse.core.runtime\.sett ...

  2. uWSGI其三：uWSGI搭配Nginx使用

    http://www.nowamagic.net/academy/detail/1330334 上一篇介绍了 uWSGI 来部署 Django 程序,但在在生产环境中单单只有 uWSGI 是不够的,N ...

  3. 小知识：如何解压cpio.gz文件

    第一种方法: zcat xxxx.cpio.gz | cpio -idmv 第二种方法 :第一步: gunzip xxxx.cpio.gz第二步:cpio -idmv < xxxx.cpio # ...

  4. nyoj 54-小明的存钱计划

    点击打开链接 小明的存钱计划 时间限制:3000 ms  |  内存限制:65535 KB 难度:2 描述 小明的零花钱一直都是自己管理.每个月的月初妈妈给小明300元钱,小明会预算这个月的花销,并且 ...

  5. DP编辑距离

    俄罗斯科学家Vladimir Levenshtein在1965年提出了编辑距离概念. 编辑距离,又称Levenshtein距离,是指两个字符串之间,由一个转成另一个所需的最少编辑操作次数.许可的三种编 ...

  6. Google Protocol Buffer 的编码方式

    Google Protocol Buffer 使用到了两种编码方式:Varints 和 zigzag. 一 Varints 编码 每个 byte 只用 7bit 表示数字,最高位 bit作为标志位,如 ...

  7. svn 终端命令

    你可以仅仅删除冲突的文件并且提交,但是svn resolved除了删除冲突文件,还修正了一些记录在工作拷贝管理区域的记录数据,所以我们推荐你使用这个命令. 恢复本地修改  svn revert [-- ...

  8. Orchard官方文档翻译(四) 让Orchard在WebMatrix下工作

    原文地址:http://docs.orchardproject.net/Documentation/Working-with-Orchard-in-WebMatrix 想要查看文档目录请用力点击这里 ...

  9. 翻译「C++ Rvalue References Explained」C++右值引用详解 Part8：Perfect Forwarding（完美转发）：解决方案

    本文为第八部分,目录请参阅概述部分:http://www.cnblogs.com/harrywong/p/cpp-rvalue-references-explained-introduction.ht ...

  10. VB datagrid指定行着色

    有图有真相: 关键点:使用datagrid的FetchRowStyle委托. (Form界面的datagrid名称:dgv) 使用FetchRowStyle委托,要先打开开关: dgv.FetchRo ...