CSS常用技巧

最新推荐文章于 2024-05-16 00:41:26 发布

小亮大叔

最新推荐文章于 2024-05-16 00:41:26 发布

阅读量219

点赞数

分类专栏： html+CSS

html+CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1.CSS实现内容超过长度后以省略号显示

样式：

{width: 160px; overflow: hidden; text-overflow:ellipsis; white-space: nowrap;}

说明：

white-space: nowrap 保证文本内容不会自动换行，如果多余的内容会在水平方向撑破单元格。

overflow: hidden 隐藏超出单元格的部分。

text-overflow: ellipsis 将被隐藏的那部分用省略号代替。

2.单行图片与文字垂直居中

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>img</title>
</head>
<body>
<div>
<div style="float:left"><img src="./koala.jpg" width="100px"/>11111111111</div>
<div style="float:left"><img src="./koala.jpg" width="100px"/>22222222222</div>
</div>
<div style="clear:both"></div>
sahdkjashdjkas
</body>
</html>

则运行效果如下所示，其中div的float:left、clear:both等属性，只是为了布局，将两张图片并排在一行，问题重点不在这。

关于div的布局，可以参考：《【CSS】关于div的对齐与网页布局》（点击打开链接）

这种，文字与图片的底部对齐应该不符合大多数人的审美，单行图片与文字在一起，文字应该垂直居中，如下图所示：

此时，在img中补上一个vertical-align:middle;就可以了。

上述效果的源代码如下：

[html] view plain copy

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>vertical_align</title>
</head>
<body>
<div>
<div style="float:left"><img src="./koala.jpg" style="vertical-align:middle;" width="100px"/>11111111111</div>
<div style="float:left"><img src="./koala.jpg" style="vertical-align:middle;" width="100px"/>22222222222</div>
</div>
<div style="clear:both"></div>
sahdkjashdjkas
</body>
</html>