css设置字体单行，多行超出省略号显示

　单行：

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

　多行

　　display: -webkit-box;
　　-webkit-box-orient: vertical;
　　-webkit-line-clamp: 3;
　　overflow: hidden;

原文地址：https://www.cnblogs.com/Tohold/p/9065968.html

时间： 2024-07-29 07:15:01

css设置字体单行，多行超出省略号显示的相关文章

05使用CSS设置字体和文本样式

使用CSS设置字体和文本样式: 1.定义字体类型font-family 用法: font-family:name; font-family:ncursive|fantasy|monospace|serif|sans-serif name表示字体名称,可指定多种字体,用空格隔开.按优先顺序排列.如果字体名称包含空格,则应该使用括号()括起来. font是一个复合属性,所谓复合属性是指该属性能够设置多种字体属性,用法如下: font:font-style||font-variant||font-we

CSS截取字符串，多余文字用省略号显示

最近才知道css也有这么叼炸天的一面~~~ 做个类似论坛的页面,用户头像70px,但是用户名没法限定啊,英文中文都可以,你说他要是取个"我的名字好长呀,你该怎么办呢",那老衲不就蛋疼菊花紧了~~ 幸好,老衲于不幸中的万幸中发现了css这么叼炸天的一面,以前一直不知道,写出来分享给大家很简单,大屁不多放,直接开菊花: css里面如下设置: a.name{ line-height: 30px; text-align: center; text-overflow:ellipsis;//让超

单行多行文字溢出显示省略号

1. 单行文字 <div class='line'>我是单行文字测试我是单行文字测试我是单行文字测试我是单行文字测试</div> .line{ width:200px; overflow:hidden; white-space: nowrap; text-overflow: ellipsis; } white-space:nowrap; (强制显示一行)overflow:hidden; (文字超出部分隐藏)text-overflow:ellipsis; (文字超出部分显示省略号)

css设置字体样式

CreateTime--2017年12月20日16:43:35 Author:Marydon 1.font-family 语法:属性值可以有一个或多个,多个值之间使用逗号隔开. 说明:如果浏览器不支持第一个字体,则会尝试下一个,使用它可识别的第一个值(字体). 举例: body { font-family: -apple-system-font,Helvetica Neue,Helvetica,Microsoft YaHei; } 用途:用于设置页面字体样式注意:设置字体为微软雅黑时,有两种方

css设置字体超出指定的宽度时显示...

一般会在新闻列表中或者详情列表中 a标签字数超出指定的宽度: 可以采用css养时解决“ text-overflow: ellipsis; white-space: nowrap; overflow: hidden; 举例: <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css

css 设置字体

CSS,font-family,好看常用的中文字体例1(小米米官网):font-family: "Arial","Microsoft YaHei","黑体","宋体",sans-serif; 例2(淘宝技术研发中心):font: 12px/1.5 Tahoma,Helvetica,Arial,'宋体',sans-serif; 例3(加网 ):font: 14px/1.5 'Microsoft YaHei',arial,tah

CSS 设置字体环绕图片效果

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Cache-Control" content="no-siteapp"> <meta name="viewport" content="width=device-width,minimum-sc

css设置字体

@font-face { font-family: 'OpenSans-ExtraBold' ; src=\'#\'" /OpenSans-ExtraBold.eot'); /* IE9 Compat Modes */ src=\'#\'" /OpenSans-ExtraBold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('font/OpenSans-ExtraBold

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

样式: {width: 160px; overflow: hidden; text-overflow:ellipsis; white-space: nowrap;} 说明: white-space: nowrap 保证文本内容不会自动换行,如果多余的内容会在水平方向撑破单元格. overflow: hidden 隐藏超出单元格的部分. text-overflow: ellipsis 将被隐藏的那部分用省略号代替.