<head>
<title>测试</title>
</head>
<body>
<style>
*{margin:0padding:0}
ul{font:14px/30px 宋体}
a{text-decoration:none}
li a{
width:100px
display:block/*内联对象需加*/
word-break:keep-all/* 不换行 */
white-space:nowrap/* 不换行 */
overflow:hidden/* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden一起使用。*/
}
li a:hover{
width:auto
/*或者width:100%*/
}
</style>
<ul>
<li><a href="#">这是是文字哦哦哦哦哦哦哦哦哦哦哦哦</a></li>
<li><a href="#">这是是文字哦哦哦哦哦哦哦哦哦哦哦哦</a></li>
<li><a href="#">这是是文字哦哦哦哦哦哦哦哦哦哦哦哦</a></li>
<li><a href="#">这是是文字哦哦哦哦哦哦哦哦哦哦哦哦</a></li>
<li><a href="#">这是是文字哦哦哦哦哦哦哦哦哦哦哦哦</a></li>
</ul>
</body>
</html>
1、首先打开Hbuilder编辑器软件，新建一个html文件，html文件中写入两个textarea文本框，并且给第二个文本设置一个class属性。
2、然后先给第一个文本框添加rows和cols属性，它们分别用来控制文本框的行数和列数，设置这两个属性就能改变文本框的高和宽；同时给第二个textarea设置class属性，在上方的style标签中设置width宽度和height高度即可，这种办法可以精确到像素级，所以比较常用。
3、最后打开浏览器，就可以看到设置的两个不同宽度的文本框效果了。
文本间距应该说的是行高，在css中是line-height 样式，不同的行高可以有不同的效果。
只需要设置行高和文本框间距一致就好，常用的地方有以下几种情况：
导航上的问题垂直居中导航条，使用line-height设置为导航条高度即可居中。
文本框里的文字，line-height设置为文本框高度即可。
必要的时候还是需要设置padding或者margin的值，一般使用百分比。
