css & multi line words & ellipsis
css & multi line words & ellipsis
bug
.news-card-content-title {
width: 100%;
height: 0.8rem;
line-height: 0.4rem;
display: block;
overflow: hidden;
/* white-space: nowrap; */
text-overflow: ellipsis;
max-width: calc(4.8rem);
}
bug
.news-card-content-title {
width: 100%;
height: 0.8rem;
line-height: 0.4rem;
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
max-width: calc(4.8rem);
}
wanted
solution
css text overflow ellipsis multi-line
https://codepen.io/xgqfrms/pen/qeZpEd
See the Pen Pure CSS multiline text with ellipsis by xgqfrms
(@xgqfrms) on CodePen.
.news-card-content-title {
width: 100%;
height: 0.8rem;
line-height: 0.4rem;
display: block;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
max-width: calc(4.8rem);
overflow: hidden;
text-overflow: ellipsis;
/* white-space: nowrap; */
}
xgqfrms 2012-2020
www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！
css & multi line words & ellipsis的更多相关文章
- css 实现省略号. text-overflow: ellipsis; 同时设置四个属性才可以.
这个同时需要. text-overflow ; overflow ; white-space ; width ; 四个属性才可以. <!DOCTYPE html> <htm ...
- CSS multi colors circle
CSS multi colors circle <!DOCTYPE html> <html lang="zh-Hans"> <head> < ...
- css delete line text & html del
css delete line text & html del html <del>¥720</del> demo <span class="ticke ...
- CSS基础：text-overflow:ellipsis溢出文本
<!DOCTYPE html><html> <head> <title> new document </title> <meta na ...
- CSS基础：text-overflow:ellipsis溢出文本显示省略号的详细方法_CSS教程
4要素: width: 125px; //宽度必须 text-overflow: ellipsis/clip; //省略号或裁剪: white-space: nowrap;//强制内容在一行显示; ...
- Python使用XML操作mapnik,实现复杂标注（Multi line text symbolizer）
test.py import mapnik stylesheet = 'world_style.xml' image = 'world_style.png' m = mapnik.Map(1200, ...
- css 设置多行文本的行间距
css 设置多行文本的行间距 block element span .ticket-card-info{ line-height:16px; display: inline-block; } .tic ...
- cssfloat布局以及其他小技巧
css float 布局以及其他小技巧总结 这篇博文 前面四个部分是关于css 经典布局 如果你已经知道了 可以直接跳过看第六部分 css 的其他小技巧 1.0 左右居中布局 <!DOCTYPE ...
- 常用css样式(布局)
兼容css3新属性 在css3中,我们可以使用prefixfree.min.js这个插件来自动为css3的相关属性加上兼容浏览器属性,使我们不用为每个css3新属性再加上属性(需要用到大量css3的项 ...
随机推荐
- 济南学校D1T3_hahaha
[问题描述] 小Q对计算几何有着浓厚的兴趣.他经常对着平面直角坐标系发呆,思考一些有趣的问题.今天,他想到了一个十分有意思的题目: 首先,小Q会在轴正半轴和轴正半轴分别挑选个点.随后,他将轴的点与轴的 ...
- 基于navicat的数据库导入导出
1.右键当前数据库,选择转储SQL文件 选择导出sql的存放路径 2.新建统一命名的数据库,右键运行SQL文件 3,.选择要导入的SQL文件后如图
- 客户端，Scala：Spark查询Phoenix
客户端,Scala:Spark查询Phoenix 1.pom.xml 2.配置文件 2.1config.properties 2.2MyConfig 3.entity实体(与phoenix中的tabl ...
- Go语言学习笔记（4）——并发编程
Golang在语言级别支持了协程,由runtime进行管理. 在Golang中并发执行某个函数非常简单: func Add(x, y int) { fmt.Println(x + y) } func ...
- sourcetree注册
http://www.cnblogs.com/xiofee/p/sourcetree_pass_initialization_setup.html
- hdu2430Beans（单调队列）
Mr. Pote's shop sells beans now. He has N bags of beans in his warehouse, and he has numbered them ...
- Codeforces Round #582 (Div. 3) G. Path Queries (并查集计数)
题意:给你带边权的树,有\(m\)次询问,每次询问有多少点对\((u,v)\)之间简单路径上的最大边权不超过\(q_i\). 题解:真的想不到用最小生成树来写啊.... 我们对边权排序,然后再对询问的 ...
- Codeforces Round #672 (Div. 2) D. Rescue Nibel! (思维,组合数)
题意:给你\(n\)个区间,从这\(n\)区间中选\(k\)个区间出来,要求这\(k\)个区间都要相交.问共有多少种情况. 题解:如果\(k\)个区间都要相交,最左边的区间和最右边的区间必须要相交,即 ...
- Codeforces Round #671 (Div. 2) B. Stairs (递推)
题意:一个台阶由一些单元格组成,如果一个高度为\(n\)的台阶中有\(n\)个不相邻的正方形(如图中的样例),就称这个台阶是"好台阶",现给你\(x\)个单元格,问最多能组成多少个 ...
- Codeforces Beta Round #92 (Div. 2 Only) B. Permutations
You are given n k-digit integers. You have to rearrange the digits in the integers so that the diffe ...