www.rtmj.net > html5 让显示不完的文字自动省略号 是什么属性

html5 让显示不完的文字自动省略号 是什么属性

p { -webkit-line-clamp: 3; // 限制显示的文本的行数为3 -webkit-box-orient: vertical; // 水平排列<p>,使其不纵向显示 word-break: break-all; // 使<p>中的文字换行 overflow: hidden; // 超出的文字部分隐藏 text-overflow: ellipsis; // 超出的文字部

文字超出了需要隐藏并显示省略号这个在工作中很多时候都要用到,我想很多人都碰到过吧,这个有两种解决方法 一是用程序开截取字符长度,这个其实也是可以的 第二种是用样式来做,这里主要介绍一下用样式怎么来做吧,我话也不多说了

给div加上这个样式试试.target{white-space:nowrap; width:12em; overflow:hidden; border:1px solid #000000;}

hidden属性在html5中,只要存在,就是隐藏效果,而不论值为多少要显示元素,要删除hidden属性,而不是设置为false<script type="text/javascript" async="true">function qq_onclick(){var text_2=document.getElementById("text_1");text_2.removeAttribute("hidden");}function qq_close(){var text_1=document.getElementById("text_1");text_1.setAttribute("hidden",true);}</script>

<!DOCTYPE html > <html > <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title>文字超过两行或三行就显示省略号</title> <style type="text/

代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Test</title> <style> .test1{ width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } </style> </head> <body> <div class="test1"> 你见

这是用程序控制的,而不是CSS.ASP中用left(文本,长度)&""PHP中用substr(文本,0,度).'';来获取.

1、新建一个html页面.2、在html代码页面找到<body>标签,在<body>标签里创建一个<p>标签,然后输入显示的内容并添加一个class类为 class="cont".3、找到<title>标签,在这个标签下面创建一个<style>标签,在<style>标签里设置class为cont的样式内容超出后为隐藏<style>.cont{overflow: hidden;/*内容超出后隐藏*/}</style>.4、为cont类添加内容显示为一行:white-space: nowrap; ,内容超出后显示为省略号:text-overflow: ellipsis; .5、保存好代码后使用浏览器查看效果.

xxxxxxxxoooooooo

直接看代码吧:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>HTML5标签</title><style>p{/**white-space:nowrap;表示文本不会换行,在同一行继续,知道遇到标签为止;overflow:hidden;不显示超过对象尺寸

网站地图

All rights reserved Powered by www.rtmj.net

copyright ©right 2010-2021。
www.rtmj.net内容来自网络,如有侵犯请联系客服。zhit325@qq.com