如何利用CSS控制文本只在一行显示?

html-css0125

如何利用CSS控制文本只在一行显示?,第1张

用CSS让文字在一行内显示不换行的方法:

一般的文字截断(适用于内联与块):

.text-overflow{

display:block             /*内联对象需加*/

width:31em

word-break:keep-all       /* 不换行 */

white-space:nowrap        /* 不换行 */

overflow:hidden           /* 内容超出宽度时隐藏超出部分的内容 */

text-overflow:ellipsis    /*溢出时显示省略标记...;需与overflow:hidden一起使用*/

}

对于表格,定义有点不一样:

table{

width:30em

table-layout:fixed      /*只有定义了表格的布局算法为fixed,下面td的定义才能起作用*/

}

td{

width:100%

word-break:keep-all     /* 不换行 */

white-space:nowrap      /* 不换行 */

overflow:hidden         /* 内容超出宽度时隐藏超出部分的内容 */

text-overflow:ellipsis  /* 溢出时显示省略标记...;需与overflow:hidden一起使用*/

}

注:这个只对单行的文字的效,如果你想把它用在多行上,也只有第一行有作用的。 这个写法只有IE会有"...",其它的浏览器文本超出指定宽度时会隐藏。

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。

1、首先,我们应该先给div设置宽度和高度,保证文字有一个范围。

2、然后通过background给div添加一张图片作为它的背景。

3、接着可以通过url()来连接图片,url里面放置的就是背景图片的路径。

4、随意地放了一张图片用作背景,一定要注意,路径要写对。

5、这样,保存之后文字就会覆盖在图片的上面了。

div {\x0d\x0ascrollbar-face-color: #fcfcfc\x0d\x0ascrollbar-highlight-color: #6c6c90\x0d\x0ascrollbar-shadow-color: #fcfcfc\x0d\x0ascrollbar-3dlight-color: #fcfcfc\x0d\x0ascrollbar-arrow-color: #240024\x0d\x0ascrollbar-track-color: #fcfcfc\x0d\x0ascrollbar-darkshadow-color: #48486c\x0d\x0ascrollbar-base-color: #fcfcfc\x0d\x0a}\x0d\x0a滚动条样式主要涉及到如下CSS属性:\x0d\x0aoverflow属性: 检索或设置当对象的内容超过其指定高度及宽度时如何显示内容\x0d\x0aoverflow: auto在需要时内容会自动添加滚动条\x0d\x0aoverflow: scroll总是显示滚动条\x0d\x0aoverflow-x: hidden禁止横向的滚动条\x0d\x0aoverflow-y: scroll总是显示纵向滚动条\x0d\x0a\x0d\x0awidth: 568pxwidth: 98%设置区域的宽度[像素/百分比等等]\x0d\x0aheight: 120px设置区域的高度[像素/百分比等等]\x0d\x0a\x0d\x0aBODY {\x0d\x0aSCROLLBAR-FACE-COLOR: #f892cc\x0d\x0aSCROLLBAR-HIGHLIGHT-COLOR: #f256c6\x0d\x0aSCROLLBAR-SHADOW-COLOR: #fd76c2\x0d\x0aSCROLLBAR-3DLIGHT-COLOR: #fd76c2\x0d\x0aSCROLLBAR-ARROW-COLOR: #fd76c2\x0d\x0aSCROLLBAR-TRACK-COLOR: #fd76c2\x0d\x0aSCROLLBAR-DARKSHADOW-COLOR: #f629b9\x0d\x0aSCROLLBAR-BASE-COLOR: #e9cfe0\x0d\x0a}\x0d\x0a\x0d\x0aSCROLLBAR-FACE-COLOR: 滚动条凸出部分的颜色\x0d\x0aSCROLLBAR-HIGHLIGHT-COLOR: 滚动条空白部分的颜色\x0d\x0aSCROLLBAR-SHADOW-COLOR: 立体滚动条阴影的颜色\x0d\x0aSCROLLBAR-3DLIGHT-COLOR: 滚动条亮边的颜色\x0d\x0aSCROLLBAR-ARROW-COLOR: 上下按钮上三角箭头的颜色\x0d\x0aSCROLLBAR-TRACK-COLOR: 滚动条的背景颜色\x0d\x0aSCROLLBAR-DARKSHADOW-COLOR: 滚动条强阴影的颜色\x0d\x0aSCROLLBAR-BASE-COLOR: 滚动条的基本颜色\x0d\x0a网页中去掉滚动条:\x0d\x0a去掉横向滚动条: \x0d\x0a去掉竖向滚动条: \x0d\x0a两个都去掉: \x0d\x0a框加中去滚动条在name=""后面加 scrolling="No"\x0d\x0a1,Overflow内容溢出时的设置\x0d\x0aoverflow 水平及垂直方向内容溢出时的设置 \x0d\x0aoverflow-x 水平方向内容溢出时的设置 \x0d\x0aoverflow-y 垂直方向内容溢出时的设置\x0d\x0a以上三个属性设置的值为visible、scroll、hidden、auto\x0d\x0avisible 默认值。使用该值时,无论设置的"width"和"height"的值是多少,其中的内容无论是否超出范围都将被强制显示。 \x0d\x0ahidden 效果与visible相反。任何超出"width"和"height"的内