css 文本超出容器长度后自动省略的方法!

我们在给用户显示文本内容的时候,往往需要避免文本内容超出容器宽度,防止换行溢出,小弟在网上找了下发现网上的实现仅仅只是实现了用 ...省略了的功能!

而并没有获取光标提示的功能,所有小弟就结合网上的代码改了个带省略号并且获取光标显示全部的功能,废话不多说先上效果图!

如果文本超出了指定宽度就会用...省略,并且当鼠标获取光标的时候会显示全部!

上代码

<span style=‘ width:290px; white-space: nowrap;text-overflow: ellipsis;overflow: hidden; display: block; ‘>
<span style="margin: 20px;">位   置:</span>
<abbr title=‘四川省绵阳市梓潼县文昌镇金龙乡一大队二组205号‘>四川省绵阳市梓潼县文昌镇金龙乡一大队二组205号</abbr>
</span>

　　

　　

时间： 2024-10-10 00:02:42

css 文本超出容器长度后自动省略的方法!的相关文章

CSS控制文本超出指定宽度后用省略号代替，CSS控制文本不换行

CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行. 一般的文字截断(适用于内联与块): .text-overflow {     display:block;/*内联对象需加*/     width:31em;     word-break:keep-all;/* 不换行 */     white-space:nowrap;/* 不换行 */     overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */     text-overflow:ellipsis;

CSS控制TD内的文本超出指定宽度后不换行而用省略号代替

<style type="text/css"> .lineOverflow { width: 100px; border:#000 solid 1px; text-overflow: ellipsis; white-space: nowrap;/*禁止自动换行*/ overflow: hidden; } </style> <table style="table-layout:fixed; width: 200px;"> <t

css文本超出部分用省略号表示

以前我在面试中遇到过这个问题,当时没答上来,现在回答一下: 1.设置三个属性: overflow:hidden   (超出部分隐藏) white-space:nowrap    (强制不换行) text-overflow:ellipsis     (文本超出用三个省略号代替) 2.代码部分截图: 3.最终效果: 原文地址:https://www.cnblogs.com/zhangnan35/p/11109210.html

ecmall用户登录后自动退出解决方法

一部分用户反映登录后自动退出,经过跟踪观察,发现这些用户都是动态IP,而ecmall 中的 session 刚好是与 ip 有关的,故而找不到用户回话二失败,需重新登录. 怎么处理呢? 修改 includes/libraries/session.lib.php 方法,简单粗暴,去掉 ip 判断即可,哇卡卡 /** * 生成session验证串 * * @author wj * @param string $session_id * @return stirng */ function gen_s

CSS文本超出指定行数后省略号显示

word-break:break-word; //换行模式overflow: hidden;text-overflow: ellipsis; //修剪文字display: -webkit-box;-webkit-line-clamp:2; //此处为上限行数-webkit-box-orient: vertical; http://www.w3school.com.cn/cssref/pr_text-overflow.asphttp://www.w3school.com.cn/cssref/pr_

文字超出容器长度自动隐藏并且显示省略号

在做网站的过程中我们会遇到这样一种情况,在新闻列表中一行只显示一条新闻,但是新闻标题的长短是不一样的,如果新闻标题过长会自动换行,当然可以使用溢出隐藏属性,但是使用溢出隐藏又会显得比较突兀,现在给大家提供以下解决方法 <style> p { white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} </style> 只需要在原先写好的样式中加入上述代码即可 原文地址:http://blog.51cto.com/12765

css文本超出部分省略号&amp;CSS强制换行总结

word-break:break-all单词截断自动换行 word-break:break-all 例如div宽200px,它的内容就会到200px自动换行,如果该行末端有个英文单词很长(congratulation等),它会把单词截断,变成该行末端为conra(congratulation的前端部分),下一行为tulation(conguatulation)的后端部分了. 支持版本:IE5以上 该行为与亚洲语言的 normal 相同.也允许非亚洲语言文本行的任意字内断开.该值适合包含一些非亚洲

CSS文本超出2行就隐藏并且显示省略号

今天做东西,遇到了这个问题,百度后总结得到了这个结果. 首先,要知道css的三条属性. overflow:hidden; //超出的文本隐藏 text-overflow:ellipsis; //溢出用省略号显示 white-space:nowrap; //溢出不换行 这三个是css的基础属性,需要记得. 但是第三条属性,只能显示一行,不能用在这里,那么如果显示多行呢? css3解决了这个问题,解决方法如下: display:-webkit-box; //将对象作为弹性伸缩盒子模型显示. -web

实现当UILable的内容超出其范围后自动滚动效果

本文主要介绍 [当UILabel的内容超出其自身的宽度范围后,进行互动展示的效果],我们先来看一下Demo的效果图. 实际实现起来并不十分繁杂,在这里,为了开发的效率,我们使用了一个已经封装好的UILabel控制类CBAutoScrollLabel:点击“阅读原文”下载. 在写代码之前,我们还有一个准备工作,在stroyBoard中,找到需要实现效果的viewController,并向需要展示滚动效果label的地方拖一个UIView空间,并将其大小确定好(范围和之前需要展示滚动效果的label