css3文本省略换行，添加字体

<!DOCTYPE html>
<html>
<head>
<title>文本省略，添加字体</title>
<meta charset="utf-8">
<style type="text/css">
div{
font-family: myFont;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
/*做到文本溢出以省略号代替的效果是text-overflow: ellipsis来决定的，但是它需要overflow: hidden;
white-space: nowrap;来配合*/
}
/*font-family可以设置文本字体，比如font-family: "微软雅黑"等
如果想使用第三方字体就需要使用@font-face来创建自定义字体然后用font-family: myFont引用
字体是区分中文和英文的*/
@font-face{
font-family: myFont;
src:url("fonts/SingleMalta.ttf");
}

</style>
</head>
<body>
<div>can i use here hhhh hhhh hhhh hhhhh hhh kkkk kkkkk dad dasd wewe ewewe ewewds dad dsds</div>
</body>
</html>

时间： 2024-08-08 22:29:51

css3文本省略换行，添加字体的相关文章

047设置文本的换行和省略模式

效果如下: ViewController.h 1 #import <UIKit/UIKit.h> 2 3 @interface ViewController : UIViewController 4 @property (strong, nonatomic) UILabel *lblMessage; 5 6 @end ViewController.m 1 #import "ViewController.h" 2 3 @interface ViewController ()

CSS3文本温故

1.CSS早期属性,分为三大类:字体.颜色和文本: 2.CSS文本类型有11个属性: 注:还有一个颜色属性:color,主要用来设置文本颜色 3.CSS3文本阴影属性:text-shadow语法:text-shadow:none | <length> none | [<shadow>,] * <shadow>或none | <color> [,<color]*也就是:text-shadow:[颜色color] x轴位移(x-offset) y轴位移(y

CSS3文本溢出

text-overflow: 1 text-overflow:clip | ellipsis; clip:剪切多余的文字. ellipsis:文本溢出时显示省略标记. 要实现文本溢出剪切显示省略标记,还需要两个属性的配合,并定义文本容器宽度. 1 2 3 text-shadow:ellipsis; white-space:nowrap; //强制文本在一行显示 overflow:hidden;  //溢出内容隐藏 1 <!DOCTYPE html> 2 <html> 3 <h

CSS3 文本效果(阴影)

CSS3中包含几个新的文本特征. 在本章中您将了解以下文本属性: text-shadow box-shadow text-overflow word-wrap word-break CSS3 的文本阴影 CSS3 中,text-shadow属性适用于文本阴影. 您指定了水平阴影,垂直阴影,模糊的距离,以及阴影的颜色: <style> h1 { text-shadow: 5px 5px 5px #FF0000; } </style> 1. CSS3 box-shadow属性 CSS3

css3 文本模型

我前期是一名前端开发者,经常会遇到关于文本模型的问题,很多地方我们会经常遇到这种问题.例如栏目的标题,在设计师给我们图的时候并不会考虑到标题的长度,所以我们自己开发的过程中自己注意这一点. 首先和大家将一下文本模型的一些基本的属性然后再针对一些案例去解析 <text>模型属性 属性 描述 Css Text-overflow 规定当文本溢出包含元素时发生的事情 3 text-fill-color 给文字指定填充颜色 text-stroke 给文字描边 text-stroke-width 给文字描

[HTML] CSS3 文本效果

CSS3 文本效果 CSS3中包含几个新的文本特征. 在本章中您将了解以下文本属性: text-shadow word-wrap 浏览器支持 Internet Explorer 10, Firefox,Chrome, Safari, 和 Opera支持text-shadow 属性. 所有的主流浏览器支持自动换行(word-wrap)属性. 注意: Internet Explorer 9及更早IE版本不支持 text-shadow 属性. CSS3的文本阴影 CSS3中,text-shadow属性

HTML 学习笔记 CSS3 (文本效果)

text-shadow 语法 text-shadow : none | <length> none | [<shadow>, ] * <shadow> 或none | <color> [, <color> ]* 也就是: text-shadow:[颜色(Color) x轴(X Offset) y轴(Y Offset) 模糊半径(Blur)],[颜色(color) x轴(X Offset) y轴(Y Offset) 模糊半径(Blur)]... 或

CSS学习笔记：溢出文本省略（text-overflow）

原文:CSS学习笔记:溢出文本省略(text-overflow) 在CSS3中,text-overflow属性的基本语法如下: clip:表示不显示省略文本,简单的裁切. ellipsis:表示对象文本溢出时显示省略标记,省略标记插入的位置是最后一个字符. ellipsis-word:表示当对象文本溢出时显示省略标记,省略标记插入的位置是最后一个词(word). 实际上,text-overflow属性仅用于决定当文本溢出时是否显示省略标记,并不具备样式定义的功能,要实现溢出时产生省略号的效果,应

CSS3 文本效果

1 CSS3 文本阴影在 CSS3 中,text-shadow 可向文本应用阴影,能够规定水平阴影.垂直阴影.模糊距离,以及阴影的颜色.text-shadow: 5px 5px 5px red; 2 CSS3 自动换行在 CSS3 中,word-wrap 属性允许您允许文本强制文本 进行换行 ,对单词进行拆分:word-wrap:break-word; 3 text-align-last 设置如何对齐最后一行或紧挨着强制换行符之前的行. 4 text-emphasis 向元素的文本应用重点标记以