style = " overflow : hidden text-overflow : ellipsis display : -webkit-box -webkit-line-clamp : 2 -webkit-box-orient : vertical "
HTML文字超过一行以后 就用省略号显示代替如下:
.font_cut{ width: 100% white-space:nowrap overflow:hidden text-overflow: ellipsis }
<div class="font_cut" style="width: 300px">34<span>一行显示不下,就用省略号代替;一行显示不下,就用省略号代替;一行显示不下,就用省略号代替;一行显示不下,就用省略号代替;一行显示不下,就用省略号代替;一行显示不下,就用省略号代替;</span>35</div>
html文字超出两行,则显示省略号
多行超出显示省略号
overflow: hidden
text-overflow: ellipsis
display: -webkit-box
-webkit-line-clamp: 2//2行
-webkit-box-orient: vertical
注意:-webkit-line-clamp是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中。只适用于WebKit内核的浏览器,因此firebox、ie等并不支持该属性。
其他浏览器做法:
比较靠谱简单的做法就是设置相对定位的容器高度,用包含省略号(…)的元素模拟实现:
文字容器样式设置:
position:relative
line-height:1.4em
height:4.2em//height是line-height的整数倍,防止文字显示不全
overflow:hidden
文字容器::after {
background: linear-gradient(to right, rgba(255, 255, 255, 0), #FFFFFF 50%) repeat scroll 0 0 rgba(0, 0, 0, 0)
bottom: 0
content: "..."
padding: 0 5px 1px 30px
position: absolute
right: 0
}
或者使用插件:js插件-Clamp.js 、 jquery插件-jQuery.dotdotdot
单行不换行:width:100%text-overflow:ellipsiswhite-space:nowrapoverflow:hidden
想在html中如果文字超出多少个就省略的 *** 作方法如下:
一是用程序开截取字符长度。
第二种是用样式来做。具体方法如下:
html代码如下:
超文本标记语言,标准通用标记语言下的一个应用。 “超文本”就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。 超文本标记语言的结构包括“头”部分(英语:Head)、和“主体”部分(英语:Body),其中“头”部提供关于网页的信息,“主体”部分提供网页的具体内容。
HTML是一种规范,一种标准,它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件,通过在文本文件中添加标记符,可以告诉浏览器如何显示其中的内容(如:文字如何处理,画面如何安排,图片如何显示等)。浏览器按顺序阅读网页文件,然后根据标记符解释和显示其标记的内容,对书写出错的标记将不指出其错误,且不停止其解释执行过程,编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是,对于不同的浏览器,对同一标记符可能会有不完全相同的解释,因而可能会有不同的显示效果。
HTML之所以称为超文本标记语言,是因为文本中包含了所谓“超级链接”点------就是一种URL指针,通过激活(点击)它,可使浏览器方便地获取新的网页。这也是HTML获得广泛应用的最重要的原因之一。
由此可见,网页的本质就是HTML,通过结合使用其他的Web技术(如:脚本语言、CGI、组件等),可以创造出功能强大的网页。因而,HTML是Web编程的基础,也就是说万维网是建立在超文本基础之上的。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)