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. ruby-rails 环境搭建

    https://ruby-china.org/wiki/install_ruby_guide

  2. 第一个jave程序-helloworld

    1.打开myeclipse,其中有个select a workspase的过程,即选择工作空间,这里需要更换空间,不要放C盘,防止项目越来越大占用C盘的空间 2.创建java工程 3.取工程名,填写自 ...

  3. 新浪SAE使用Thinkphp框架，禁用memcache节省豆子的方法

    请在入口文件定义常量,SAE_RUNTIME为true请在本地打开命令行, cd 到项目所在文件夹,执行命令: php index.php 此时会在./App/Sae_Runtime目录下批量生成缓存 ...

  4. SparkSQL On Yarn with Hive，操作和访问Hive表

    转载自:http://lxw1234.com/archives/2015/08/466.htm 本文将介绍以yarn-cluster模式运行SparkSQL应用程序,访问和操作Hive中的表,这个和在 ...

  5. Chapter Querying Data

    Chapter Querying Data XF获取数据的三种方法: 其中参数schema,参见 Chapter Schema. 下面列出一个后面将会用到的schema片段,称之为片段A: <U ...

  6. iOS UIButton 设置图片文字垂直排列

    后面经过测试,如果button的文字长度变更,会导致图片位置变化,经过多次修改UIEdgeInsets的值也没有达到期望效果,最终采用集成UIButton类,重写layoutSubviews函数实现, ...

  7. OC基础(1)

    Objective-C简介 OC和C对比 第一个OC程序 面向对象思想 *:first-child { margin-top: 0 !important; } body > *:last-chi ...

  8. 转载：Cocos2D-x 游戏接入 Windows 设备所需做的六件事

    原文地址:http://msopentech.com/zh-hans/blog/2014/05/09/cocos2d-x-%E6%B8%B8%E6%88%8F%E6%8E%A5%E5%85%A5-wi ...

  9. python 简单实现文件拷贝

    1.背景 一日加班需要写一个文件拷贝的函数. 写了几版拷贝函数,有需要的直接粘贴过去 def CopyLocaleFile1(sorfile,desfile): #第一版 sorfp=open(sor ...

  10. 剑指Offer:面试题4——替换空格（java实现）

    问题描述:请实现一个函数,把字符串中的每个空格替换成"%20". 例如: 输入:"We are happy." 输出:"We%20are%20happ ...