div+css怎么样控制文本两行显示多余的行数隐藏

html-css045

div+css怎么样控制文本两行显示多余的行数隐藏,第1张

<!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">

<style

type="text/css">

.text

{

height:

40px

overflow:

hidden

width:

300px

word-wrap:

break-word

}

</style>

</head>

<body>

<div

class="text">

only

two

only

two

only

two

only

two

only

two

only

two

only

two

only

two

only

two

only

two

only

two

only

two

only

two

only

two

only

two

</div>

</body>

</html>

问题说明:

首先把高度固定了，然后使用overfow：hidden

把超出部分隐藏，效果请运行代码查看

.top_right_nav{ height:42pxoverflow:hidden}

在css那里添加这个代码,height设置固定高度,overflow设置超出部分隐藏,如果有需要的话可以把width的值也设置上~