当在网页中显示文本过长该怎么办?
来源:互联网 发布:高仿运动服 淘宝 编辑:程序博客网 时间:2024/05/26 20:24
当在网页中显示文本过长该怎么办?
当我们在设计网页页面的时候,有时候肯定会遇到这种情况,我们要显示的文本超出了我们元素的宽度。这时候调宽元素的width固然是可以的,但是太宽了又不太美观了。我们可能会想能不能不改变元素的width,让超出的部分隐藏掉,然后鼠标移动到文本上的时候把全部的内容再显示出来。下面我们就来说说CSS中能够实现这种效果的方式...代码如下,各个样式的注释已经在代码中
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>test</title> <style type="text/css"> .textOverFlow { width:300px; overflow:hidden;/*让超出宽度的部分隐藏*/ text-overflow:ellipsis;/* 其他 浏览器 显示省略符号来代表被修剪的文本。*/ -o-text-overflow:ellipsis; /* Opera 9-10 显示省略符号来代表被修剪的文本。*/ white-space:nowrap;/*让文字不自动换行,无论CSS宽度设置多少,所有文字都在一行内显示*/ border:1px solid #ddd; } .mytable{ width: 20%; table-layout: fixed; border:1px solid #ddd; } .mytable tr td{ overflow:hidden;/*让超出宽度的部分隐藏*/ text-overflow:ellipsis;/* 其他 浏览器 显示省略符号来代表被修剪的文本。*/ -o-text-overflow:ellipsis; /* Opera 9-10 显示省略符号来代表被修剪的文本。*/ white-space:nowrap;/*让文字不自动换行,无论CSS宽度设置多少,所有文字都在一行内显示*/ } .mytable tr td:hover{ overflow:visible;/*默认值。内容不会被修剪,会呈现在元素框之外。*/ } </style></head><body><div class="textOverFlow">我是一个超长的文字,我是一个超长的文字,我要被隐藏</div><hr><table class="mytable" border="1"> <tr> <td width="80%">121313</td> <td width="20%">我是一个超长的文字,我要被隐藏</td> </tr></table></body></html>
下面来看各个浏览器的效果图,亲测
IE浏览器(version 11)
鼠标移动到文字上后
火狐浏览器(version 38.0.1)
鼠标移动到文字上后
360浏览器(version 7)
鼠标移动到文字上后
0 0
- 当在网页中显示文本过长该怎么办?
- 如果在表格中想要显示一个页面,该怎么办?
- 电脑在 Parallels Access 中显示离线该怎么办?
- 当汇错款时该怎么办?
- 当汇错款时该怎么办?
- OAF学习笔记-15-大文本(过长,英文数字)在table 中换行显示
- 当TextView中文字过长,需要显示为省略号
- Android中当数据库需要更新时我们该怎么办?
- Android中当数据库需要更新时我们该怎么办
- Android中当数据库需要更新时我们该怎么办
- Android中当数据库需要更新时我们该怎么办?
- Android中当数据库需要更新时我们该怎么办?
- Android中TextView文本过长滚动显示实现
- CSS文本过长显示省略号
- 在移动端单行文本在不同的屏幕下当文本过长时增加省略号效果
- img标签在jsp页面无法显示时该怎么办
- 当表格显示内容过长时
- GridView 中字段长度超长以省略号显示,当鼠标放在该记录上时显示完整信息
- 内容提供器(Content Provider)
- 详解软件无线电(SDR)架构
- 容斥原理
- 读AbstractQueuedSynchronizer类源码
- 【Android】多个Activity之间利用bundle传递数值
- 当在网页中显示文本过长该怎么办?
- UVA10405 LCS不同长度
- 轮廓矩-- moments()、contourArea()和 arcLength()
- Android 手动创建活动
- qsort和sort的dif
- Unity3D游戏开发-模仿项目一 第一人称角色射击(有源代码)
- c++读取文件–结束条件的判断
- google验证码 kaptcha 的使用
- 揭开Shellcode的神秘面纱