.goods {	/* 一行显示*/	-webkit-line-clamp: 1; /* 将对象作为弹性伸缩盒子模型显示 */	display: -webkit-box; /*子元素的排列方式 */	-webkit-box-orient: vertical; text-overflow:ellipsis;	overflow: hidden; word-break:break-all; }
显示效果: 以下是图片素材 以下是页面代码部分 <!doctype html> <...CSS3设置图片显示3D效果</title> <meta charset="UTF-8">
显示效果:
以下是图片素材
以下是页面代码部分
CSS3设置图片显示3D效果*{ margin:0; padding:0;} html{ max-width:640px; min-width:320px; margin:0 auto;} html,body{ display:block; width:100%; height:100%;} body{ font-family:"PingFangSC-Regular","sans-serif","STHeitiSC-Light","微软雅黑","Microsoft YaHei";	-webkit-user-select:none; user-select:none; -webkit-touch-callout:none; touch-callout:none; } #box{ width:300px; height:300px; margin:0 auto; position:relative;	/*设置从何处查看一个元素的角度*/	-webkit-perspective:1200px;	perspective:1200px;	/*设置一个3D元素的基数位置*/	-webkit-perspective-origin:center center;	perspective-origin:center center;	/*让转换的子元素保留3D转换 -- preserve-3d:表示所有子元素在3D空间中呈现*/	-webkit-transform-style:preserve-3d;	transform-style:preserve-3d;	-webkit-transform:scale(.8);	transform:scale(.8); } .roateBox{	-webkit-animation:roateBox 10s linear infinite;	animation:roateBox 10s linear infinite; } @-webkit-keyframes roateBox{	0%{ -webkit-transform:rotateY(0) scale(.8);}	100%{ -webkit-transform:rotateY(-360deg) scale(.8);} } @keyframes roateBox{	0%{ transform:rotateY(0) scale(.8);}	100%{ transform:rotateY(-360deg) scale(.8);} } #box img{ width:100%; height:100%; object-fit:contain; position:absolute; left:0; top:0;} #box img:nth-child(1){ -webkit-transform:rotateY( 0deg); transform:rotateY( 0deg);} #box img:nth-child(2){ -webkit-transform:rotateY( 45deg); transform:rotateY( 45deg);} #box img:nth-child(3){ -webkit-transform:rotateY( 90deg); transform:rotateY( 90deg);} #box img:nth-child(4){ -webkit-transform:rotateY(135deg); transform:rotateY(135deg);} #btn{ width:100px; height:30px; line-height:30px; margin:20px auto; text-align:center; border-radius:5px; background-color:#ddd; cursor:pointer;} #list{ text-align:center;} #list img{ width:70px;}

开始旋转

以下是上面旋转所用的图片素材

document.getElementById('btn').onclick = function(){	document.getElementById('box').setAttribute('class','roateBox');	document.getElementById('btn').innerHTML = '正在旋转'; }
文字多了就添加省略号,不用程序去判断字符,英文和汉字的字符数量是不对应的,一个汉字占两个英文字符的位置,如果一行出现了英文字符,裁切就不准确了,不过用css可以办到控制文字只显示一行,超出部分显示省略号...
文字一行显示,多出部分显示成省略号 html结构前端开发工程师
对应的css样式为 .title{ width: 50px; color: skyblue; white-space: nowrap; overflow: hidden; ...