css 超出文本 省略号

css 超出文本 省略号 以及不生效解决办法!

1. 单行文本 超出隐藏 省略号
实现方法:

				overflow: hidden;
				text-overflow:ellipsis;
				white-space: nowrap;

效果:
css 超出文本 省略号_第1张图片

2. 多行文本超出隐藏 显示省略号
实现方法:

	    display: -webkit-box;
	    text-overflow:ellipsis; 
	    -webkit-box-orient: vertical;
	    -webkit-line-clamp: 2;     //数字代表行数,自行设置
	    overflow: hidden;

效果:
css 超出文本 省略号_第2张图片

ok!!

补充!问题出现了!!!
好多地方有的时候我们多行溢出放上上边五行代码并不管用!
解决办法~

	overflow:hidden; 
    text-overflow:ellipsis; 
    display:-webkit-box; 
    /* autoprefixer: off */ 
    -webkit-box-orient:vertical;
     /* autoprefixer: on */ 
     -webkit-line-clamp:4;

放上以上7行代码。 再试试!!!
可以的话 记得回来谢我~~~ 哈哈哈 开玩笑,共享!

你可能感兴趣的:(css,省略号,超出隐藏)