td中的nowrap

转载自:http://www.zzlabs.com.cn/
本文解释了nowrap是什么意思,以及在td中nowrap的使用,并提供了一个详细的完整代码来具体演示教学。

nowrap是什么意思

HTML中td元素的nowrap属性表示禁止单元格中的文字自动换行。
但使用时要注意的是,td元素noWrap属性的行为与td元素的width属性有关。td元素中nowrap属性的行为与td元素的width属性有关。如果未设置td宽度,则nowrap属性起作用的,如果设置了td宽度,则nowrap属性不起作用。

nowrap详细解说
nowrap表示是否允许表格中的文本换行
nowrap=true的时候不能换行
nowrap=false可以换行

nowrap实例演示

 

<html>
<head>
<title>wrap属性研究</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>

<body bgcolor="#FFFFFF" text="#000000">
<p>测试字符串:</p>
<p>我终于明白,我其实有一条韧性十足的命,它远比我想象中的那条命结实得多、耐磨的多……</p>
<p>单元格未设置nowrap属性的空表:</p>
<table width="100" border="1" cellspacing="0" cellpadding="0">
<tr>
<td>&nbsp;</td>
</tr>
</table>
<p>加入测试字符串:</p>
<table width="100" border="1" cellspacing="0" cellpadding="0">
<tr>
<td>我终于明白,我其实有一条韧性十足的命,它远比我想象中的那条命结实得多、耐磨的多……</td>
</tr>
</table>
<p>单元格设置了nowrap属性,未设置width属性:</p>
<table width="100" border="1" cellspacing="0" cellpadding="0">
<tr>
<td nowrap>我终于明白,我其实有一条韧性十足的命,它远比我想象中的那条命结实得多、耐磨的多……</td>
</tr>
</table>
<p>单元格设置了nowrap属性,也设置了width属性:</p>
<table width="200" border="1" cellspacing="0" cellpadding="0">
<tr>
<td width="120" nowrap>我终于明白,我其实有一条韧性十足的命,它远比我想象中的那条命结实得多、耐磨的多……</td>
<td>&nbsp;</td>
</tr>
</table>
</body>
</html>

补存1
在css中控制强制换行或不换行的写法为:
语法:
white-space : normal | pre | nowrap |inherit
取值:
normal   : 默认值。默认处理方式。文本自动处理换行。假如抵达容器边界内容会转到下一行
pre   : 换行和其他空白字符都将受到保护。这个值需要IE6+或者 !DOCTYPE 声明为 standards-compliant mode 支持。如果 !DOCTYPE 声明没有指定为 standards-compliant mode ,此属性可以使用,但是不会发生作用。结果等同于 normal 。参阅 pre 对象
nowrap   : 强制在同一行内显示所有文本,直到文本结束或者遭遇 br 对象。参阅 noWrap 属性

补存2

网页设计排版的时候遇到了这样一个问题,就是我的网页是分块的,每块有不同的内容,今天发现,有块输入内容时,把别的块都撑的不成样子了,下面列出来的是我通过baidu检索的解决方案,现摘录到这里,方便以后查阅!

强制不换行
div{
white-space:nowrap;
}
自动换行
div{
word-wrap: break-word;
word-break: normal;
}
强制英文单词断行
div{
word-break:break-all;
}


CSS设置不转行:
overflow:hidden 隐藏
white-space:normal 默认
              pre 换行和其他空白字符都将受到保护
              nowrap 强制在同一行内显示所有文本,直到文本结束或者遭遇 br 对象
设置强行换行:
word-break:
            normal: 依照亚洲语言和非亚洲语言的文本规则,允许在字内换行
            break-all:该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本
            keep-all:与所有非亚洲语言的normal相同。对于中文,韩文,日文,不允许字断开。适合包含少量亚洲文本的非亚洲文本与之间的高度解决办法

英文不换行
    CSS里加上 word-break: break-all; 问题解决。这个问题只有IE才有,在FF下测试,FF可以自己加滚动条,这样也不影响效果
建议大家做Skin时,记得在body里加 word-break: break-all; 这样可以解决IE的框架被英文撑开的问题

说明:
设置或检索对象内文本的字内换行行为。尤其在出现多种语言时。
对于中文,应该使用break-all 。
对应的脚本特性为wordBreak。
示例:
div {word-break : break-all; }

下面的是多浏览器支持CSS 容器内容超出(溢出)支持自动换行完美代码
<style type="text/css">
.linebr {
clear: both; /* 清除左右浮动 */
width: 100px; /* 必须定义宽度 */
word-break: break-word; /* 文本行的任意字内断开 */
word-wrap: break-word; /* IE */
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -hp-pre-wrap; /* HP printers */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: pre; /* CSS2 */
white-space: pre-wrap; /* CSS 2.1 */
white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
}

virtualboxsharefolderusage

today,i finally find how to use share folder with the virtual os is windows,you should open the network neighbor,double click virtualbox newwork,in this folder there is a folder named //Vboxsvr

<style type=”text/css”> p, li { white-space: pre-wrap; } </style>

<!–StartFragment–>Then, you can mount the shared folder from inside a VM the same way as you would mount an ordinary network share:

  • In a Windows guest, starting with VirtualBox 1.5.0, shared folders are browseable and are therefore visible in Windows Explorer. So, to attach the host’s shared folder to your Windows guest, open Windows Explorer and look for it under “My Networking Places” -> “Entire Network” -> “VirtualBox Shared Folders”. By right-clicking on a shared folder and selecting “Map network drive” from the menu that pops up, you can assign a drive letter to that shared folder.
  • Alternatively, on the Windows command line, use the following:

<span style="font-family: 'Courier New,courier';">net use x: \\vboxsvr\sharename</span>

While vboxsvr is a fixed name (note that vboxsrv would also work), replace “x:” with the drive letter that you want to use for the share, and sharename with the share name specified with VBoxManage.

  • In a Linux guest, use the following command:
  • <span style="font-family: 'Courier New,courier';">mount -t vboxsf [-o OPTIONS] sharename mountpoint</span><!--EndFragment-->

    博客网址

    全面认识Flex六大要素

      在学习Flex应用程序的过程中,Flex应用程序的组成元素是必须要掌握的知识,这里和大家分享一下,一个典型的Flex应用程序包括六大元素,请看下文详细介绍。

      Flex是如何工作的

      该部分文档的内容是为用户提供关于Adobe Flex工作机制的一个快速综述。通过本章节的学习,你可以创建你的第一个Flex应用程序,并将它与你以前所熟悉的Web开发技术进行比较,以领会Flex的内涵和精髓。

      一个典型的Flex应用程序包括元素:

      1.Flexframework

      Adobe Flex2framework包含了创建RIA所需要的所有组件,它们是:用于应用程序布局规划的容器;针对用户界面和从用户处获取数据的控制(例如文本框和按钮);广泛支持的数据绑定、数据格式化、以及有效值验证;事件驱动的开发模式。Flexframework被包含在公用组件库(SWC)文件中。

      2.MXML

      每个Flex应用程序至少包含有一个MXML文件,它被作为该程序的主文件。MXML是一种标记语言,它是基于XML的一种实现,用来创建Flex应用程序。你可以使用它去声明程序中所使用的标签结构的定义。

      3.ActionScript3.0

      你可以使用ActionScript3.0为应用程序添加动态行为,它是基于ECMAScript的一种实现,类似于JavaScript。你可以将ActionScript作为一个脚本块,在MXML文件中直接进行添加;或者创建一个单独的ActionScript文件,然后将它们导入到MXML文件中。

      4.CSS

      你可以通过设置组件的属性(properties)来改变组件(按钮、列表框等)的视觉样式。
      例如,按钮组件有一个fontFamily属性,你可以使用它来进行字体的设置。样式的属性通常有四种方法来进行控制:通过主题(theme);在CSS文件中进行定义;在MXML文件中的样式块中进行定义;在组件的实例中进行设置。

      5.图形资源

      与很多Flex应用程序一样,Flex包含了各种各样的图形资源,如图标和图象。

      6.数据

      一些组件被使用来进行数据显示(combobox或者datagrid)的工作。同时,你还可以使用各种方式来将这些组件与数据联系起来,如使用数组、收集对象、数据模型、以及外部XML数据资源,等等。

      转自51CTO

    css样式教程8、CSS的Class以及ID选择器

    前面的学习我们仅仅使用HTML选择器(在HTML页面里为html标签,如P)
      现在我们学习使用clss和id定义属于自己的选择器。
      这样,同样的html元素可以通过class或ID使用不同的表现。
      在CSS里,使用点号(.)创建class选择器,使用hash符号(#)创建ID选择器。
      例子:

    程序代码 程序代码
    #top{
    background-color:#ccc;
    padding:1em
    }

    .intro{
    color:red;
    font-weight:bold;
    }

      html页面通过id和class属性调用CSS,像下面这样:

    程序代码 程序代码
    <divid=”top”>
    <h1>Chocolatecurry</h1>
    <pclass=”intro”>Thisismyrecipeformakingcurrypurelywithchocolate</p>
    <pclass=”intro”>Mmmmmmmmmm</p>
    </div>

      id和class的不同指出在于一个页面同一个ID只能只有一次,而class可以无限制使用。
      同样,你可以在html选择器后面使用一个选择器来指定特殊HTML元素,比如p.jam{值}将作用到带有’jam’class属性的段落。

    FF下使用CSS3实现圆角效果

        以前在页面上实现圆角效果的时候,一直使用的是圆角背景图片来实现.当 OpenCms官方网站 改版以后,也有了好看的圆角效果.
       
        不过发现也是使用了圆角背景图片.

        而我在使用 OpenCms 的时候发现,在页面发生错误的时候,错误页面上竟然也是圆角效果.如下这样:

        而这里的效果,发现是用 CSS 实现的呢.于是把这里的 CSS 代码拿到别的地方,修改参数,就看到了如下效果:
       
        这样看起来是不是比那个方方正正的角看起来舒服多了呢  🙂

        实现这个效果的代码如下:
            border-radius: 20px;
            -moz-border-radius: 20px;
        查看了 W3C 的文档,看到解释如下:

    ========================================
    The ‘border-radius’
    properties

    Name:

    border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius, border-top-left-radius, border-radius

    Value:

    <length> <length> 

    Initial:

    0

    Applies to:

    all elements, except table element when ‘border-collapse’ is ‘collapse’

    Inherited:

    no

    Percentages:

    N/A

    Media:

    visual

    Computed value:

    specified values

    The two length values of the ‘border-radius’ properties define the radii
    of a quarter ellipse that defines the shape of the corner (see the diagram
    below). The first value is the horizontal radius (or vertical if the ‘writing-mode’ is
    vertical). If the second length is omitted it is equal to the first (and the
    corner is thus a quarter circle). If either length is zero, the corner is
    square, not rounded. The border radius also causes the element’s background
    to be rounded, even if the border is ‘none’.
    Negative values are not allowed.

    Diagram of the inscribed ellips

    The two values of ‘border-top-left-radius’ define the
    curvature of the corner.

    All border styles (‘solid’,
    ‘dotted’, ‘inset’, etc.) follow the curve of the border.
    Border images specified with ‘border-image’, however, are clipped at the
    outer edge of the curve. Or are they not affected at
    all 

    ========================================

        很有意思,看来随着 CSS 的发展,是越来越细化了.看来以后很多效果都会有更好的实现方式了.

        不过不好的消息就是,据说这个效果只是在支持最新的 CSS 的浏览器上才有.否则嘛,这个属性和没有设置是一样的,譬如说刚才看到的圆角效果,在 IE6 下看到就依然是直愣愣的:
       
        总之,不知道浏览器的标准什么时候才能统一.这样的话,开发的时候就不会为了兼容性费脑筋了.祈祷吧…

    CSShack

     什么是CSS hack
    来源:http://www.div-css.com
    什么是CSS hack

    由于不同的浏览器,比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等,对CSS的解析认识不一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。

    这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果。

    这个针对不同的浏览器写不同的CSS code的过程,就叫CSS hack,也叫写CSS hack。

    CSS Hack的原理是什么 
    由于不同的浏览器对CSS的支持及解析结果不一样,还由于CSS中的优先级的关系。我们就可以根据这个来针对不同的浏览器来写不同的CSS。

    比如 IE6能识别下划线_和星号*,IE7能识别星号*,当不能识别下划线_,而firefox两个都不能认识。等等

    书写顺序,一般是将识别能力强的浏览器的CSS写在后面。下面如何写里面说得更详细些。
    如何写CSS Hack

    比如要分辨IE6和firefox两种浏览器,可以这样写:

       1. <style> 
       2. div{ 
       3.     background:green; /* for firefox */ 
       4.     *background:red;  /* for IE6 */ 
       5. } 
       6. </style> 
       7. <div>我在IE6中看到是红色的,在firefox中看到是绿色的。</div> 

    <style> div{ background:green; /* for firefox */ *background:red; /* for IE6 */ } </style> <div>我在IE6中看到是红色的,在firefox中看到是绿色的。</div>

    解释一下:
    上面的css在firefox中,它是认识不了后面的那个带星号*的东东是什么的,于是将它过滤掉,不予理睬,解析得到的结果是:div{background:green},于是理所当然这个div的背景是绿色的。
    在IE6中呢,它两个background都能识别出来,它解析得到的结果是:div{background:green;background:red;},于是根据优先级别,处在后面的red的优先级高,于是当然这个div的背景颜色就是红色的了。

    CSS hack:区分IE6,IE7,firefox
    区别不同浏览器,CSS hack写法:

    区别IE6与FF:
           background:orange;*background:blue;

    区别IE6与IE7:
           background:green !important;background:blue;

    区别IE7与FF:
           background:orange; *background:green;

    区别FF,IE7,IE6:
           background:orange;*background:green !important;*background:blue;

    注:IE都能识别*;标准浏览器(如FF)不能识别*;
    IE6能识别*,但不能识别 !important,
    IE7能识别*,也能识别!important;
    FF不能识别*,但能识别!important;

     IE6  IE7  FF
    *  √  √  ×
    !important  ×  √  √

    另外再补充一个,下划线”_”,
    IE6支持下划线,IE7和firefox均不支持下划线。

    于是大家还可以这样来区分IE6,IE7,firefox
    : background:orange;*background:green;_background:blue;

    注:不管是什么方法,书写的顺序都是firefox的写在前面,IE7的写在中间,IE6的写在最后面。

    9、CreatingLinks

    1、链接地址分三种:absolute/document relative/site-root relative。absolute链接包括协义、域名全路径。document relative是以../、文件夹名、文件名开头,路径相对于当前页面。site-root relate是以/开头的相对于应用根路径。

     

    2、在dw中可以从insert面版或菜单insert中插入hyper link。另外也可以选中文本后在属性面版点击html标签栏后填写link地址,这样会自动把文字转化为link。

     

    3、在图片中以alt,在a标签中以title显视提示信息。

     

    4、地图搜索引擎搜索某地址后,在地图上方一般有一个link的按钮或链接,点击后会弹出url/frame。此时复制到你的网页中即可显视地图。

     

    5、符号#+元素ID出现在链接后叫描(anchor)。用户点击后会导航到该链接地址并滚动页面到该ID的元素处。该ID可以为任意元素的ID,也可以是一个拥有id和name属性,但没有href属性的a元素。

     

    6、在css中定义伪类时要注意顺序,:lover必需位于:link/:visited之后。