登录  /  注册
首页 > web前端 > html教程 > 正文

文本溢出text-overflow和文本阴影text-shadow - 小火柴的蓝色理想

php中文网
发布： 2016-05-21 08:42:24
原创
1917人浏览过
×
目录
[1]文本溢出 [2]文本阴影

前面的话

　　CSS3新增了一些关于文本的样式，其中text-overflow文本溢出和text-shadow文本阴影有些特别。因为它们有对应的overflow溢出属性和box-shadow盒子阴影属性。本文将详细介绍这两个作用在文本上的溢出和阴影属性

 

文本溢出

　　一般地，人们一提到文本溢出，想到的就是文本溢出的经典代码

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
登录后复制

　　但实际上，文本换行不一定非要使用white-space；overflow属性值也不一定非要使用hidden。

定义

text-overflow

　　值: clip | ellipsis

　　初始值: clip

　　应用于: 块级元素、替换元素、表单元格

　　继承性: 无

clip: 不显示省略标记(...)，只是简单的裁切，相当于无效果
ellipsis: 文本溢出时显示省略标记(...)，省略标记插入的位置是最后一个字符
登录后复制

　　[注意]当文本溢出属性应用于表单元格时，需要设置table-layout:fixed

　　[注意]该属性兼容性很好，兼容IE6+的主流浏览器及移动端iso和android

实现

【1】当存在长英文文本时，text-overflow属性起作用的前提是

overflow(或overflow-y或overflow-x):hidden | auto | scroll
登录后复制

【2】当文本为汉字时，text-overflow属性起作用的前提是

实现汉字不自动换行可使用word-break: keep-all; 或 white-space: nowrap;
overflow(或overflow-y或overflow-x):hidden | auto | scroll
登录后复制

 

文本阴影

　　类似于盒子阴影，文本阴影也有x轴偏移、y轴偏移、模糊半径和阴影颜色这四个值，但是并没有阴影尺寸和内部阴影这两个值

定义

text-shadow

　　值: none | (h-shadow v-shadow blur color)+

　　初始值: none

　　应用于: 所有元素

　　继承性: 无

h-shadow: 水平阴影位置(必须)
v-shadow: 垂直阴影位置(必须)
blur:     模糊距离(该值不能为负值，可选)
color:    阴影颜色，默认和文本颜色一致(可选)
登录后复制

　　[注意]该属性IE9-浏览器不支持

//多层阴影
text-shadow: 1px 1px blue,5px 5px 5px red;
登录后复制

　　[注意]不要加太多层阴影，会有性能问题

常见效果

【文字阴影代码查看】

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题，提供实时的代码和解决方案，帮助你解决各种难题。不仅如此，它还能提供编程资源和学习指导，帮助你快速提升编程技能。无论你是初学者还是专业人士，AI智能助手都能成为你的可靠助手，助力你在编程领域取得更大的成就。
我要提问
来源：php中文网
收藏 点赞
上一篇：CSS3秘笈第三版涵盖HTML5学习笔记13~17章 - 平凡世界平凡人 下一篇：Summary—【base】（HTML） - 小花大方
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
无需媒体查询即可实现 3 列桌面到 1 列移动布局 这里研究了一些问题，但它们并不能完全解决我正在寻找的问题。假设我有一个网站并且我想要。在桌面上我想要这个：这很容易。grid-template-columns:重复(3,33%)(...
P粉085689707来自于2023-12-23 14:03:05
0 1 257
NextJS 13 更新服务器组件数据 所以我正在学习/适应NextJS13及其新的APP文件夹。我很难弄清楚如何在无需重新加载页面/应用程序的情况下更新服务器组件上的数据。目前，我的主页服务器组件从MongoDB获取项...
P粉015402013来自于2023-12-23 12:02:07
0 1 202
无法连接到“localhost:3306”上的 MySQL 服务器(99) - 使用 docker-compose 我正在尝试使用docker-compose连接到本地计算机的MySQL数据库，我在docker-compose文件中编写以下代码：db-my-sql:image:mysql:lat...
P粉432906880来自于2023-12-22 23:59:06
0 1 191
可组合项中的 Vue 3 模板引用 我想从选项API切换到组合API，并使用可组合项代替mixin。到目前为止，我一直在使用具有计算属性的全局mixin，如下所示：//globalMixin.jscomputed:{...
P粉153503989来自于2023-12-22 22:57:26
0 1 199
在 Laravel 中使用 Vue 路由器：分步指南 我使用laravel9和vue3进行开发。我的问题很简单，但是路径设置不太顺利。当我访问urllocalhost:8080/tasks此网址返回404未找到，我收到以下类型错误获取...
P粉165823783来自于2023-12-22 21:54:31
0 2 279
Pinia 中的继承/共享操作和吸气剂 我有几个Pinia商店，它们应该共享一组操作和getter，但我不太确定如何有效地实现这一点。我正在构建一个应用程序，让用户可以管理多种不同的媒体（书籍、电影、电视节目等）。我目前...
P粉662614213来自于2023-12-22 13:50:12
0 2 204
在当前数据库中不存在表`main.Product`。如何在render.com上部署Prisma数据库？ 在我的项目的最后一部分中，我似乎无法正确部署prisma数据库。该网站成功构建，我可以查看该网站，但当我尝试访问数据库时，它显示以下内容：无效的prisma.product.fin...
P粉151720173来自于2023-12-21 23:47:25
0 1 255
在 Laravel 上选择 OnChange Javascript 我想这样做，以便当我单击其中一个下拉列表时，根据相关表中的记录ID的值立即出现。我想要这样做，以便当我单击其中一个下拉列表时，会立即出现根据相关表中的记录ID的值。当选择“golo...
P粉765570115来自于2023-12-21 22:37:07
0 1 245
Vue 3自定义复选框组件绑定到所选值的数组 我一直在尝试创建一个带有样式复选框和相应标签的简单组件。所有选定复选框的值（字符串）应存储在一个数组中。这适用于纯html复选框：<template><div&g...
P粉561749334来自于2023-12-21 18:43:52
0 1 308
观察全局路由变化并在 Nuxt2 中执行某些操作 我正在使用NuxtJSv2，需要在每次页面更改和页面加载期间运行一个函数，我知道我可以在布局中添加路由观察器，但这意味着必须将其添加到每个布局中，我有很多，例如：<scrip...
P粉649990163来自于2023-12-21 18:00:30
0 1 230
相关专题
更多>
热门推荐
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 技术文章
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
app下载
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2023 //m.sbmmt.com/ All Rights Reserved | php.cn | 湘ICP备2023035733号

登录PHP中文网，和优秀的人一起学习！
全站2000+教程免费学
微信扫码登录

  • 精品班

  • 技术支持

  • 技术咨询

  • 学习群

  • 会员优惠

  • 返回顶部