【CSS】文字溢出问题 ( 强制文本在一行中显示 | 隐藏文本的超出部分 | 使用省略号代替文本超出部分 )
CSS 问题 使用 显示 文本 部分 隐藏 文字
2023-06-13 09:18:50 时间
一、文字溢出问题
在元素对象内部显示文字 , 如果文本过长 , 则会出现文本溢出的问题 ;
下面的示例中 , 在 150x25 像素的盒子中 , 显示 骐骥一跃,不能十步;驽马十驾,功在不舍;
一段话 , 明显盒子太小 , 默认的显示效果如下 :
文字溢出代码示例 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文字溢出处理</title>
<style>
div {
width: 150px;
height: 25px;
border: 1px solid red;
}
</style>
</head>
<body>
<div>
骐骥一跃,不能十步;驽马十驾,功在不舍;
</div>
</body>
</html>
显示效果 :
二、文字溢出处理方案
文字溢出处理方案 :
- 首先 , 强制文本在一行中显示 ;
white-space: nowrap;
- 然后 , 隐藏文本的超出部分 ;
overflow: hidden;
- 最后 , 使用省略号代替文本超出部分 ;
text-overflow: ellipsis;
white-space 样式 用于设置 文本显示方式 :
- 默认方式 : 显示多行 ;
white-space: normal;
- 显示一行 : 强行将盒子中的文本显示在一行中 ;
white-space: nowrap;
text-overflow 样式 用于设置 文字溢出处理方案 :
- 默认方式 - 简单裁切 : 不显示
...
省略号 ;
text-overflow : clip;
- 显示省略号 : 文本溢出时 , 显示
...
内容 ;
text-overflow : ellipsis;
三、代码示例
代码示例 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文字溢出处理</title>
<style>
div {
width: 150px;
height: 25px;
border: 1px solid red;
/* 首先 强制文本在一行中显示 */
white-space: nowrap;
/* 然后 隐藏文本的超出部分 */
overflow: hidden;
/* 最后 使用省略号代替文本超出部分 */
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div>
骐骥一跃,不能十步;驽马十驾,功在不舍;
</div>
</body>
</html>
执行结果 :
相关文章
- html+css面试题集锦(一)
- css规则定义的分类,CSS规则定义英汉对照表[通俗易懂]
- css 定位差异特点
- html中table美化,漂亮的css table样式「建议收藏」
- 使用html css实现180箭头旋转,纯CSS实现箭头旋转「建议收藏」
- CSS 换行_css不允许换行
- css让div居中显示_css页面居中
- css选择器学习网站
- React 组件库 CSS 样式问题分析
- 【CSS教程】紫色渐变登陆布局html+css代码
- 【CSS】CSS 层叠样式表 ③ ( CSS 引入方式 - 外链式 | CSS 样式规则 )
- 【CSS】课程网站 网格商品展示 模块制作 ② ( 网格商品展示盒子模型测量及样式 | 处理列表间隙导致意外换行问题 | 代码示例 )
- WordPress 主题教程 #9:Style.css 和 CSS 介绍
- 【CSS】使用 z-index 属性值控制定位盒子的堆叠顺序 ( 多个盒子堆叠次序问题 | z-index 属性值简介 | 控制盒子堆叠次序 )
- 谈谈CSS的浮动问题详解编程语言
- css笔记详解编程语言
- CSS 属性设置优先级问题详解编程语言
- 轻松学会html+css
- CSS连接MySQL构建可视化Web应用(css连接mysql)
- 布局用CSS+DIV的优点总结
- JS控制CSS样式的方法
- CSS规则层叠的应用css必须要注意的几点
- CSS顶级技巧大放送,div+css布局必知
- css下margin、padding、border、background和font缩写示例
- IE6不能正常解析CSS文件问题的解决方法及原因分析
- JS函数实现动态添加CSS样式表文件
- jQuery+CSS实现菜单滑动伸展收缩(仿淘宝)
- jQuery获取CSS样式中的颜色值的问题,不同浏览器格式不同的解决办法
- 解决css和js的{}与smarty定界符冲突问题的两种方法
- 批量修改标签css样式以input标签为例