CSS3 文本效果(text-shadow,box-shadow,white-space等)文本溢出隐藏并且显示省略号

news2024/11/23 20:49:49

一 text-shadow

text-shadow 属性是 CSS3 中用于为文本添加阴影效果的工具。它可以增强文本的可读性和视觉吸引力,提供丰富的视觉效果

1 语法

text-shadow: offset-x offset-y blur-radius color;
  • offset-x:阴影相对于文本的水平偏移量。可以是正值(向右偏移)或负值(向左偏移)。
  • offset-y:阴影相对于文本的垂直偏移量。可以是正值(向下偏移)或负值(向上偏移)。
  • blur-radius(可选):阴影的模糊程度。值越大,阴影越模糊。可以省略,省略时阴影为锐利的边缘。
  • color:阴影的颜色。可以使用任何有效的颜色值,如 rgba、hex、color name 等。
h1
{
    text-shadow: 5px 5px 5px #FF0000;
}

在这里插入图片描述

  • 5px 5px:阴影相对于文本向右下偏移 5 像素。
  • 5px:阴影模糊半径为 4 像素。
  • #FF0000:阴影颜色。

2 多重阴影
可以通过逗号分隔多个阴影,以创建复杂的效果:

h2 {
  text-shadow: 1px 1px 2px rgba(0,0,0,0.5), -1px -1px 2px rgba(255,255,255,0.3);
}
  • 1px 1px 2px rgba(0,0,0,0.5):第一个阴影,向右下偏移 1 像素,模糊半径 2 像素,颜色为半透明黑色。
  • -1px -1px 2px rgba(255,255,255,0.3):第二个阴影,向左上偏移 1 像素,模糊半径 2 像素,颜色为半透明白色。

二 box-shadow属性

box-shadow 属性在 CSS 中用于为元素添加阴影效果。它可以创建深度感和视觉层次,使元素更具立体感。

1 语法

box-shadow: offset-x offset-y blur-radius spread-radius color inset;
  • offset-x:阴影相对于元素的水平偏移量。正值表示向右偏移,负值表示向左偏移。
  • offset-y:阴影相对于元素的垂直偏移量。正值表示向下偏移,负值表示向上偏移。
  • blur-radius(可选):阴影的模糊程度。值越大,阴影越模糊。省略时默认为 0,阴影边缘锐利。
  • spread-radius(可选):阴影的扩展半径。正值使阴影扩展,负值使阴影收缩。省略时默认为 0。
  • color:阴影的颜色。可以使用任何有效的颜色值,如 rgba、hex、color name 等。
  • inset(可选):如果指定,则阴影将显示在元素内部而不是外部。默认是外部阴影。
.box {
  box-shadow: 4px 4px 8px rgba(0,0,0,0.3);
}
  • 4px 4px:阴影相对于元素向右下偏移 4 像素。
  • 8px:阴影模糊半径为 8 像素。
  • rgba(0,0,0,0.3):阴影颜色为半透明黑色。
    在这里插入图片描述
    2 多重阴影
    可以使用逗号分隔多个阴影效果:
.box {
  box-shadow: 2px 2px 5px red, -2px -2px 5px rgba(125, 255, 96, 0.5);
}
  • 2px 2px 5px rgba(0,0,0,0.3):第一个阴影,向右下偏移 2 像素,模糊半径 5 像素,颜色为半透明黑色。
  • -2px -2px 5px rgba(255,255,255,0.5):第二个阴影,向左上偏移 2 像素,模糊半径 5 像素,颜色为半透明白色。
    在这里插入图片描述
    3 内部阴影
    使用 inset 创建内部阴影:
.box {
  box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
}
  • inset:使阴影显示在元素内部。
  • 0 0 10px rgba(0,0,0,0.5):阴影没有偏移,模糊半径 10 像素,颜色为半透明黑色。
    在这里插入图片描述
    4 阴影扩展
    使用 spread-radius 进行阴影扩展:
.box {
  box-shadow: 0 0 10px 5px rgba(0,0,0,0.3);
}
  • 0 0 10px 5px:阴影没有偏移,模糊半径 10 像素,扩展半径 5 像素,使阴影比元素本身大。
  • rgba(0,0,0,0.3):阴影颜色为半透明黑色。
    在这里插入图片描述

三 text-overflow

text-overflow 是 CSS 属性,用于指定当文本溢出其容器时的处理方式。主要有以下几种值:

  • clip:默认值,文本超出容器时被裁剪,不显示溢出的部分。
  • ellipsis:文本超出容器时显示省略号(…),表示有更多内容被隐藏。
  • string:可以自定义溢出部分显示的字符串,适合支持的浏览器。

通常与 white-space 和 overflow 一起使用,例如:

.container {
  width: 100px;
  white-space: nowrap; /* 防止换行 */
  overflow: hidden;    /* 隐藏超出部分 */
  text-overflow: ellipsis; /* 溢出部分显示省略号 */
}

这样,当文本过长时,它会被裁剪并显示省略号。

四 word-wrap

word-wrap 是 CSS 的一个早期属性,用于控制长单词或 URL 是否在需要时被强制换行,以避免超出容器的宽度。

语法:

word-wrap: normal | break-word;
  • normal:这是默认值。浏览器在长单词或 URL 时不会强制换行,单词会在自然的换行点处换行。
  • break-word:浏览器会在需要时强制换行长单词或 URL,以防止文本溢出容器边界。

五 word-break

word-break 是一个 CSS 属性,用于控制文本在换行时的行为。它影响文本如何在块级元素中断行,尤其是在长单词或连续字符无法在正常换行点断开时的处理方式。

word-break: normal | break-all | keep-all;

属性值

  1. normal

定义:这是默认值。文本会在正常的换行点(例如空格或连字符)断行,不会在单词内断行。
适用情况:适用于大多数文本布局,保持文本在常规的换行规则下。

  1. break-all

定义:允许在任何字符之间断行,无论是单词还是单个字母。这意味着即使在单词中间也会强制换行。
适用情况:用于处理长字符串或单词,尤其是在不允许水平滚动条的情况下。例如,长的 URL 或长的连续字符(如汉字)需要强制换行。

  1. keep-all

定义: 只在允许的换行点断行(如空格),并且不会在单词中断行。适用于不希望在单词或字符之间断行的情况,尤其是中文文本。
适用情况:适用于中文、日文或韩文等东亚文字,这些语言通常不在单词中间断行。

六 white-space

white-space 属性在 CSS 中用于控制文本内空白字符的处理和换行行为。它影响元素中的文本如何显示和格式化。
属性值

  1. normal

描述:这是默认值。多个空格会被合并为一个,文本会自动换行以适应其容器。
适用场景:大多数情况下使用,如段落文本或一般文本块。
效果:

<div style="white-space: normal;">
  这是      一段  文本。
  这段文本会根据容器的宽度自动换行。
</div>
  1. nowrap

描述:多个空格会被合并为一个,但文本不会换行,会一直显示在一行内,直到容器边界。
适用场景:用于需要单行显示的元素,如按钮或导航条。

效果:

<div style="white-space: nowrap;">
  这是      一段  文本。
  这段文本不会换行,会继续在一行内显示。
</div>
  1. pre

描述:保留所有的空格和换行符,文本显示方式类似于 <pre> 标签的行为。

适用场景:需要精确控制文本格式的内容,如代码块或诗歌。
效果:

<div style="white-space: pre;">
  这是      一段  文本。
  这段文本的空格和换行符都会被保留。
</div>
  1. pre-wrap

描述:保留空格和换行符,但在需要时允许文本换行以适应容器的宽度。
适用场景:适用于需要保留文本格式,但又希望文本能够在容器内换行的情况。
效果:

<div style="white-space: pre-wrap;">
  这是      一段  文本。
  这段文本的空格和换行符会被保留,但会在需要时换行。
</div>
  1. pre-line

描述:合并多个空格为一个,但保留换行符。
适用场景:需要保留文本中的换行符,但不希望多余的空格影响布局。

效果:

<div style="white-space: pre-line;">
  这是      一段  文本。
  这段文本会保留换行符,但多余的空格会被合并。
</div>

使用建议

  • normal:适合大多数文本内容,需要自动换行的情况。
  • nowrap:用于需要保持在一行中的情况,如标签或导航菜单。
  • pre:适合代码、诗歌等需要准确格式的文本。
  • pre-wrap:适用于长文本,保留格式但允许换行。
  • pre-line:适合需要保留换行但合并空格的文本。

七 text-transform

text-transform 是一个 CSS 属性,用于控制文本的大小写转换。它允许你修改文本的显示样式,使其变成全大写、全小写、首字母大写等。
属性值

  1. uppercase

将所有字符转换为大写字母。

.uppercase {
  text-transform: uppercase;
}
  1. lowercase

将所有字符转换为小写字母。

.lowercase {
  text-transform: lowercase;
}
  1. capitalize

将每个单词的首字母转换为大写字母。

.capitalize {
   text-transform: capitalize; 
 }
  1. none

取消所有 text-transform 的效果,文本保持原样。

.none {
  text-transform: none;
}

八 text-decoration

text-decoration 是一个 CSS 属性,用于设置文本的装饰效果,比如下划线、上划线或删除线
属性值

  1. underline

为文本添加下划线。

.underline {
  text-decoration: underline;
}
  1. overline

为文本添加上划线。

.overline {
  text-decoration: overline;
}
  1. line-through

为文本添加删除线(横线)。

.line-through {
  text-decoration: line-through;
}
  1. none

移除任何文本装饰效果。

.none {
  text-decoration: none;
}
  1. blink (不常用)

使文本闪烁。此值在许多现代浏览器中不再支持。

.blink {
  text-decoration: blink;
}

九 CSS实现单行或者多行文本溢出隐藏并且显示省略号

单行

 white-space: nowrap;   //不换行
 overflow: hidden;       //超出部分隐藏
 text-overflow: ellipsis;    //文本溢出显示省略号

多行

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 5;
  • overflow: hidden;:隐藏超出容器的内容。
  • text-overflow: ellipsis;:在文本溢出时使用省略号表示。
  • display: -webkit-box;:使用 WebKit 特有的盒模型来控制文本显示。
  • -webkit-box-orient: vertical;:设置盒子的方向为垂直,允许文本换行。
  • -webkit-line-clamp: 5;:限制文本显示为最多 5 行,并在超出部分使用省略号。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2096961.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

STM32CUBEIDE FreeRTOS操作教程(四):timer软件定时器

STM32CUBEIDE FreeRTOS操作教程&#xff08;四&#xff09;&#xff1a;timer软件定时器 STM32CUBE开发环境集成了STM32 HAL库进行FreeRTOS配置和开发的组件&#xff0c;不需要用户自己进行FreeRTOS的移植。这里介绍最简化的用户操作类应用教程。以STM32F401RCT6开发板为例&am…

18047 水仙花数

### 思路 1. 遍历所有的三位数&#xff08;100到999&#xff09;。 2. 对于每个数&#xff0c;提取其百位、十位和个位数字。 3. 计算这些数字的立方和。 4. 如果立方和等于原数&#xff0c;则该数是水仙花数&#xff0c;输出该数。 ### 伪代码 1. 遍历i从100到999&#xff1a…

HTTP中常用的4种请求方式——前端如何发送?后端怎么接受?

一.Get请求&#xff1a; 1.什么是Get请求&#xff1f; 2.前后端如何使用Get交互&#xff1f; 2.1.Query参数格式的Get请求 2.2.Path参数格式的Get请求 二.Post请求&#xff1a; 1.什么是Post请求&#xff1f; 2.前后端如何使用Post交互&#xff1f; 三.Put请求&#xf…

数据库操作与集成:使用Python与SQLite、MySQL、PostgreSQL等数据库

目录 引言 一、Python与SQLite的集成 1.1 SQLite简介 1.2 连接SQLite数据库 1.3 创建表 1.4 插入数据 1.5 查询数据 1.6 更新和删除数据 二、Python与MySQL的集成 2.1 MySQL简介 2.2 安装与配置 2.3 连接MySQL数据库 2.4 创建表与插入数据 2.5 查询、更新与删除数…

笔记:《利用Python进行数据分析》之apply的应用

这一节较难&#xff0c;十分灵活&#xff0c;可多花点时间 apply的简单应用 最通用的GroupBy方法是apply。 apply会将待处理的对象拆分成多个片段&#xff0c;然后对各片段调用传入的函数&#xff0c;最后尝试将各片段组合到一起。 回到之前那个小费数据集&#xff0c;假设你…

(四)vForm 动态表单自定义组件、属性

系列文章目录 (一)vForm 动态表单设计器之使用 (二)vForm 动态表单设计器之下拉、选择 (一)vForm 动态表单设计器之使用 文章目录 前言 一、自定义字段组件 1. 获得自定义组件json 2. 源码修改 二、自定义属性面板 1.属性面板文件 2.添加自定义属性 3.为字段组件添加属…

同事用10分钟给公司做了一套数据大屏,实力选手非他莫属!

数据可视化大屏是什么&#xff1f; 数据可视化大屏是一种将大量数据以图形、图表、地图等直观形式展示在大屏幕上。它通常被应用于企业的监控中心、会议室、展厅等场所&#xff0c;用于实时展示企业的关键业务指标、运营数据、市场趋势等信息。 今天给大家分享用JVS-智能BI如何…

DBdoctor快速纳管GBase 8a数据库

目录 如何快速纳管GBase 8a&#xff1f; 1.GBase 8a分析型数据库纳管部署架构 2.一分钟零依赖DBdoctor Server安装 3.快速纳管GBase 8a 重点说明&#xff1a; 针对GBase 8a&#xff0c;DBdoctor提供哪些功能服务&#xff1f; 1.SQL审核 2.深度巡检与报表 3.性能洞察 1&…

WebSocket通信学习笔记

1 简介 WebSocket是一种全双工通信协议&#xff0c;它允许客户端和服务器之间建立持久化的双向连接&#xff0c;从而在不频繁创建HTTP请求的情况下进行实时数据传输。与传统的HTTP协议相比&#xff0c;WebSocket更适合需要实时数据更新的应用场景&#xff0c;如聊天应用、实时…

架构师篇-23、工作坊实战应用架构

复习 ADM - 应用架构【AA】 案例实践 - 应用组件 - 核心模块 案例实践 - xx 项目应用关系 课程内应用架构

科研绘图系列:R语言PCoA图(PCoA plot)

介绍 PCoA(主坐标分析,Principal Coordinate Analysis)是一种多维数据的降维技术,它用于探索高维空间中样本之间的关系。PCoA通常用于生态学、遗传学和其他领域的数据分析,以揭示样本或个体之间的相似性或差异性。 PCoA图的作用: 数据降维:PCoA可以将高维数据(如物种…

18046 字母分类统计

### 思路 1. 读取输入的一行字符。 2. 初始化计数器&#xff1a;字母、数字、空格和其它字符的个数。 3. 遍历每个字符&#xff0c;根据其类型更新相应的计数器。 4. 输出计数结果&#xff0c;格式为&#xff1a;字母、数字、空格和其它字符的个数&#xff0c;中间以空格分隔。…

【2024-2025源码+文档+调试讲解】公开课管理系统

摘 要 随着互联网技术的迅猛发展&#xff0c;教育行业也逐渐迎来了一场全新的变革。在线教育平台的崛起为学习者提供了更加便捷灵活的学习方式&#xff0c;而公开课作为其中的一种形式&#xff0c;因其开放性和多样性而备受欢迎。然而&#xff0c;传统的公开课管理方式存在着…

【案例】如何做B端竞品分析?

竞品分析是产品经理的基本功&#xff0c;B端产品经理同样也需要经常做竞品分析。 B端产品的竞品分析难度更大&#xff0c;主要体现在如下几个方面&#xff1a; 1&#xff09;B端产品的信息获取困难 产品试用成本高&#xff0c;不像互联网产品那样可以随时下载体验。 对外公…

【数学分析笔记】第3章第1节 函数极限(1)

3. 函数极限与连续函数 3.1 函数极限 设有一半径为 r r r的圆&#xff0c;角度 x x x用弧度制表示。 红色的弧长为 2 x r 2xr 2xr&#xff0c;蓝色的弦长为 2 r sin ⁡ x 2r\sin x 2rsinx y 弦长 弧长 sin ⁡ x x y\frac{弦长}{弧长}\frac{\sin x}{x} y弧长弦长​xsinx​…

云计算密钥管理的重要性

云计算密钥管理是指对云计算环境中使用的加密密钥进行全生命周期的管理过程&#xff0c;包括密钥的生成、存储、分发、使用、更新和销毁等环节。这一过程对于保障云计算数据的安全性至关重要。以下是对云计算密钥管理的详细阐述&#xff1a; 一、云计算密钥管理的重要性 随着云…

大道至简 以量取胜

这次聊聊网络推广&#xff0c;这种发文章发视频的推广。 厉害的人&#xff0c;选高权重平台&#xff0c;精心打磨雕琢文案&#xff0c;一篇文案引爆流量十万&#xff0c;非常牛逼。 普通人很难做到这样。也许一篇文案&#xff0c;只有几百个浏览。 咱们简化一下&#xff0c;…

创纪录!300亿美元季度营收背后,英伟达的汽车“困局”

作为全球市值最高的上市公司&#xff0c;英伟达的财务数据变化历来是资本市场关注的焦点。不管是数据中心、游戏还是汽车业务&#xff0c;这家GPU巨头的业务进展&#xff0c;一定程度上也代表着不同细分市场的风向变化。 本周&#xff0c;英伟达对外发布最新数据&#xff0c;截…

北京市公共资源交易中心到访隆道调研交流

8月29日下午&#xff0c;北京市公共资源交易中心调研组在党委副书记朱永利带领下莅临隆道公司开展调研。隆道公司总裁吴树贵、总裁助理姚锐和市场总监张晶热情地接待来访的九位调研组成员&#xff0c;双方就招标采购数字化转型实践、人工智能技术研究和应用等话题展开深入交流。…

(免费领源码)java#SSM#mysql黄冈旅游景点服务网站16627-计算机毕业设计项目选题推荐

摘 要 信息化社会内需要与之针对性的信息获取途径&#xff0c;但是途径的扩展基本上为人们所努力的方向&#xff0c;由于站在的角度存在偏差&#xff0c;人们经常能够获得不同类型信息&#xff0c;这也是技术最为难以攻克的课题。针对旅游服务等问题&#xff0c;对旅游服务进行…