问题：css制作动态导航栏菜单如果在文字太多会撑大， 怎么办？怎么设置css，请大家教我。

html-css024

问题：css制作动态导航栏菜单如果在文字太多会撑大， 怎么办？怎么设置css，请大家教我。,第1张

在相应的css中这样设置：

white-space:nowrap 这个表示禁止换行。

overflow:hidden 这个表示隐藏益处部分··

祝你成功~

举例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />

<title>Untitled Document</title>

</head>

<body>

<div style="font-size:12pxcolor:#FFFwidth:60pxheight:20pxbackground:#00Fwhite-space:nowrapoverflow:hidden">演示菜单演示菜单演示菜单演示菜单演示菜单演示菜单</div>

</body>

</html>

样式设置高度撑满整个页面，那么必须从最外层一层一层设置高度100%；代码如下：html,body,div{

height:100%}

这里默认div是第三层，如果要撑满全页面的话，那么外层必须也是高度100%；

下面举个例子：

<html>

<head>

<style>

*{

padding:0

margin:0

box-sizing:border-box}

html,body,div{

height:100%

}

</style>

<body>

<div>高度全屏</div>

</body>

</html>

1、默认情况，它是自动换行的；

2、设置文字不换行white-space:nowrap，强行撑开；

3、如果不希望容器被撑开，那就给文字加省略号：

<style type="text/css">

.divbox{ width:150px white-space:nowrap overflow:hidden text-overflow:ellipsis}

</style>

</head>

<body>

<div class="divbox">文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</div>

</body>