1、强制不换行,文字溢出显示省略号:
{
white-space: nowrap; //文本强制不合法
text-overflow:ellipsis; //文本溢出显示省略号
overflow:hidden; //溢出部分隐藏
}
2、图片自适应:针对PC端和手机端访问,图片被拉伸
{
max-width:100%;
height: auto;
display: inline-block;
}
本文介绍两种实用的CSS技巧,一是如何让文字强制不换行并在溢出时显示省略号,二是实现图片自适应,避免在不同设备上访问时图片被拉伸的问题。这些技巧对于提升网页布局的专业性和用户体验至关重要。
1、强制不换行,文字溢出显示省略号:
{
white-space: nowrap; //文本强制不合法
text-overflow:ellipsis; //文本溢出显示省略号
overflow:hidden; //溢出部分隐藏
}
2、图片自适应:针对PC端和手机端访问,图片被拉伸
{
max-width:100%;
height: auto;
display: inline-block;
}
12万+
488
779

被折叠的 条评论
为什么被折叠?