css内容超出时不换行(css文字超出自动换行)

http://www.itjxue.com  2023-01-27 20:03  来源:未知  点击次数: 

div+css如何让超过屏幕宽度的时候不换行?

#td{overflow-x :auto; width:10px;float:left;margin:0 10px 0 10px}

基本语法

overflow-x : visible | auto | hidden | scroll

语法取值

visible : 默认值。不剪切内容也不添加滚动条。假如显式声明此默认值,

对象将以包含对象的 window 或 frame 的尺寸裁切。并且 clip 属性设置将失效

auto : 在必需时对象内容才会被裁切或显示横向滚动条

hidden : 不显示超过对象尺寸的内容

scroll : 总是显示横向滚动条

如何用css实现不能自动换行,如果文字过长,省略,用”…”替代?

最好是用块级元素,父级必须得有个宽度,如果不设置,列如移动端会出现横向滚动条

举例:

div?class='box'

????h1标题信息/h1

????p内容描述/p

/div

style

????.box{width:100%}

????.box?h1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/style

white-space:nowrap;????//代表文字不自动换行

overflow:hidden;??????????//代表溢出隐藏

text-overflow:ellipsis;???//代表溢出省略号

很好用的,一般只设置溢出隐藏会出现截取一般的字,用这个属性就不会了,溢出会出现...

如何设置文本不换行省略号显示等CSS常用文本

whitespace:nowrap

中文行末不断行显示

overflow:

控制超出文本的显示方式:hidden 超出范围文本隐藏;scroll 始终显示滚动条;auto 根据文字多少自动显示滚动条

text-overflow:

在overflow设置隐藏的情况下怎么显示

clip裁剪ellipsis省略号显示

那么让多余文字省略号显示需要以下三步:

①white-space:nowrap;如果是中文 设置文字超出范围不断行

②overflow:hidden;设置超出控件范围隐藏;

③text-overflow:ellipsis; 设置多余文本隐藏显示;

!DOCTYPE html

html

head

meta charset="UTF-8"

title/title

style type="text/css"

div{

width: 100px;

height: 100px;

background-color: green;

}

li{

color: red;

list-style: none;

}

.li{

color: blue;

font:italic bold 75%/1.8 "Microsoft Yahei",san-serif;

font-weight: lighter;

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

}

/style

/head

body

div

ul

li class="li"第一项第一项第一项第一项第一项/li

li第二项/li

li第三项/li

li第四项/li

/ul

/div

/body/html

div+css如何让超过屏幕宽度的时候不换行

把外面那个div宽度设置比屏幕大就行了,这样浏览器会出现滚动条,如果不想浏览器出现滚动条,给div属性overflow:scroll;或者overflow:hidden;根据自己需求给

(责任编辑:IT教学网)

更多

推荐CMS技巧文章