处理网页上的字符溢出的方法

网页上有什么一行字符太长了，会溢出来，影响网页美观，这时需要对字符进行溢出处理。

比如下面的例子：

<div class="title">省略字符的例子</div>
<div class="overflow">这是一段测试文字，测试过长的文字是否会被省略，省略的文字为今天是星期五</div>
<div class="overflow">这是一段测试文字，测试过长的文字是否会被省略，省略的文字为今天是星期五</div>

　要想达到省略的效果给div.overflow声明一下的样式：

 .overflow{width:27em;-o-text-overflow:ellipsis;/*opera浏览器white-space:nowrap;/*控制内容在单行显示*/text-overflow:ellipsis;/*省略的内容用省略号表示*/overflow:hidden;/*隐藏省略的内容*/}

　　但是这个方法并不适合火狐浏览器。对于火狐浏览器要引用ellipsis.xml文件。

  -moz-binding:url('ellipsis.xml#ellipsis');

　　省略的效果图如下：

第二种方法就是使用jQuery。代码如下：

<script>$(".overflow").each(function(){var maxwidth=23;if($(this).text().length>maxwidth){$(this).text($(this).text().substring(0,maxwidth));$(this).html($(this).html()+'...');}});

　　PS：要是对表格内容进行单行控制和省略，那么必须table声明一个样式

.table{width:100%;
table-layout:fixed;
}

如果需要显示当鼠标浮动在对应的td上，全部内容能显示在一个悬浮框里，可以采用Bootstrap里面的Tooltip插件。提示工具（Tooltip）。默认情况是把提示工具放在要提示内容的后面。有两种方法添加提示工具

（1）通过data属性：如需添加一个提示工具，只需向一个锚标签添加data-toggle="tooltip"即可

（2）通过JavaScript

$('#identifier').tooltip(options)

因为Tooltip不是纯css插件，如果需要该插件，必须经过jquery来激活。使用以下的脚本

$(function () { $("[data-toggle='tooltip']").tooltip(); });

实例

<button type="button" class="btn btn-default" data-toggle="tooltip"title="默认的 Tooltip">默认的 Tooltip
</button>
<script>$(function () { $("[data-toggle='tooltip']").tooltip(); });
</script>

title表示是要显示的全部内容。

当鼠标悬浮在按钮上的话，就会出现“默认Tooltip“的悬浮框。

如果想改变悬浮框的样式。可以通过修改#tooltip样式来修改样式。

转载于:https://www.cnblogs.com/NaCl/p/9677767.html

处理网页上的字符溢出的方法相关推荐

python获取网页图片_Python获取网页上图片下载地址的方法
本文实例讲述了Python获取网页上图片下载地址的方法.分享给大家供大家参考.具体如下: 这里获取网页上图片的下载地址是正在写的数据采集中的一段,代码如下: #!/user/bin/python3 i ...
如何在html上显示时间设置,js实现在网页上简单显示时间的方法
本文实例讲述了js实现在网页上简单显示时间的方法.分享给大家供大家参考.具体如下: 这是一款网页时钟JS代码,纯javascript实现,显示时.分.秒.网页时间显示.网页时钟有很多,这个真的挺简易的 ...
“网页上有错误”的解决方法
一个网站可以打开,但状态栏里总显示"网页上有错误",是服务端那里的源程序有问题,还是客户端那里有问题,请说明产生错误的原因,还有解决方法.... 一个可能性比较大的是网页本身的问题 ...
qq上得去网页上不去的解决方法
1.网络已经连接,qq上得去,网页上不去 2.尝试使用360断网急救箱,DNS优选 3.打开浏览器,里面的选项,然后找到里面网络的选项,更改代理设置,在高级里面重置一下internet Explore ...
jar 工程我怎么在网页上url访问某一个方法_url及url参数与seo网站优化的关系
短视频,自媒体,达人种草一站服务首先我还是援引下百度百科关于url的定义. 统一资源定位符(Uniform Resource Locator,缩写为URL)是对可以从互联网上得到的资源的位置和访问方 ...
jar 工程我怎么在网页上url访问某一个方法_搜狗用这个骚技术，把百度逼上了绝路。。。...
点击上方[全栈开发者社区]→右上角[...]→[设为星标⭐] 前几天在百度搜索的时候,一不小心误点搜索候选词,给我跑到搜狗搜索里面去了,索性花了点时间分析一下这其中的猫腻,不看不知道,一看吓一跳. 在 ...
jar 工程我怎么在网页上url访问某一个方法_Java高级编程之URL处理
URL(Uniform Resource Locator)中文名为统一资源定位符,有时也被俗称为网页地址.表示为互联网上的资源,如网页或者FTP地址. 本章节我们将介绍Java是如处理URL的.URL ...
怎么愉快的复制网页上不能复制文字的方法
网上的办法有很多,大部分是使用上的漏洞,但是我们作为技术人员那么去弄就太LOW了,接下来从修改代码的角度去过掉,很简单: 这里以百度文库为例子,毕竟百度文库真的是XX: 第一步: ctrl+s保存: ...
JS网页上显示中文乱码解决方法
问题描述 js文件在Eclipse显示中文正常,在网页中打开源文件中文便变成乱码.其中,js文件编码为UTF-8,javaScript引用时也设定编码为utf-8,但仍然无效. 解决方案更改js源文 ...
html网页上有错误,打开网页显示网页上有错误的原因！已完毕但网页上有错误的4大解决方法...
最近,有位朋友在使用浏览器打开某一个站点,浏览器左下角总显示"已完毕,但网页上有错误",并且网页显示不完全,或是空白的,不知道怎么回事.想知道如何解决打开网页显示网页上有错误.针对 ...

处理网页上的字符溢出的方法

处理网页上的字符溢出的方法相关推荐

最新文章

热门文章