How to overflow the title text and display the ellipsis '...'
标题、内容段末文本溢出“......”显示
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!--meta标签注释：如果安装了GCF，则使用GCF来渲染页面，如果为安装GCF，则使用最高版本的IE内核进行渲染。-->
<title>文本溢出截取...</title>
<link rel="stylesheet" href="css/min.css" /> <!--公共css样式-->
<link rel="stylesheet" href="css/index.css" />
</head>
<body>
<h1>NO.1</h1>
<div class="main_one">
<p>
生于蜂农之家的王佩甫先生，自小便追随父母辗转全国，天南海北，哪里花开，就往哪里赶。人在哪，家就在哪。追花虽辛苦，但对于养蜂人来说，苦尽甘来，收获琼浆，便能支撑起一家人的生活。 上世纪90年代，已深谙养蜂之道的王佩甫常骑着小车沿街兜售蜂蜜，后来在黔灵公园附近租了一个很小的门面落下了脚，渐渐有了回头客。1998年，王佩甫创办了贵州第一家公司化运营的蜂企业“百花蜂业”，并注册了品牌“黄果树蜂园”。
</p>
</div>
</br>
</br>
<h1>NO.2</h1>
<div class="main_ones">
<p>
痛客网设立严格的准入规则，专人上门验证审核，并通过大数据背景调查，力保服务商信息真实可靠。全新的企业服务产品线涵盖办公司、找人财法、找技术、找市场、创新方案等5大类别、200多个细类，全方位满足企业各环节需求。 企业用户想要获取企业服务，只需要登录痛客网，就可以像在天猫购买商品一样，在痛客网上买服务！ 目前，签约入驻痛客网的服务商已达到357家，其中不乏东软、用友、方正、财新、和君咨询、中细软、快法务、中青博联、埃摩森、泰和泰、法大大等品牌服务商。就在今天，同样都是为上班族解决痛点的痛客与ofo小黄车，要一起搞事情啦！
</p>
</div>
</br>
</br>
<h1>NO.3</h1>
<div class="main_onees">
<p>
痛客×ofo | 90天单车免费骑！解决企业痛点，“骑”实可以很轻松！
</p>
</div>
</body>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/jquery-overflow.js" ></script>
<script type="text/javascript">
$('.main_one').ellipsis({
english: false, //布尔。英文模式字符偏小，需扩大筛选空间，实际源码中是通过此参数修改并覆盖OP_NUM；
lineNum: 2 //控制行数截取
});
$('.main_ones').ellipsis({
english: false, //布尔。英文模式字符偏小，需扩大筛选空间，实际源码中是通过此参数修改并覆盖OP_NUM；
lineNum: 2 //控制行数截取
});
$('.main_onees').ellipsis({
english: false, //布尔。英文模式字符偏小，需扩大筛选空间，实际源码中是通过此参数修改并覆盖OP_NUM；
lineNum: 1 //控制行数截取
});
</script>
</html>css代码
body {
font: 12px/1.5 "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue";
}
.main_one p {
width: 800px;
text-indent: 20px;
text-align: justify;
}
.main_ones {
width: 500px;
text-align: justify;
}
.main_onees {
width: 605px;
text-align: justify;
}jquery-overflow.js代码
/**
* jquery:2017-10-19
* @version:1.0.1
* @author:jason
* @qq:847557896@qq.com */(function($) {
$.fn.ellipsis = function(options) { //插件参数
options = $.extend({ //英文模式
english: false, //优化系数
OP_NUM: 1.3, //数字。优化系数，一般不需要设置。默认1.3中文模式，1.3*2.5英文模式
//目标行数
lineNum: "",
}, options);
$(this).each(function(index, element) { //优化系数
var OP_NUM = options.OP_NUM; //wrap
var $wrap = $(this); //目标p
var $p = $('p', $wrap); //行数
var lineNum = options.lineNum; //最初整篇文章
var originAll = $p.text(); //字体大小
var pFontSize = parseInt($p.css('font-size')); //行高
var pLineHeight = parseInt($p.css('line-height')); // 过去宽度
var oldWidth = $p.width(); // 现在宽度
var nowWidth = oldWidth; //根据行数设置wrap高度
var wrapHeight = lineNum * pLineHeight;
$wrap.height(wrapHeight); // 英文模式，字符偏多，系数*2.5
OP_NUM = options.english ? 1.3 * 2.5 : 1.3; //首次加载先进行一次粗略筛选
$p.text(originAll.slice(0, lineNum * nowWidth / pFontSize * OP_NUM)); //主功能
function render() {
nowWidth = $p.width(); //当页面放大时，粗略筛选
if(nowWidth > oldWidth) {
$p.text(originAll.slice(0, lineNum * nowWidth / pFontSize * OP_NUM));
}
oldWidth = nowWidth; //核心筛选
while($p.outerHeight() > wrapHeight) {
$p.text($p.text().replace(/\s?(\w+|\W{1,3})(\.{3})?$/, "..."));
};
}
render();
});
};
})(jQuery);
The above is the detailed content of How to overflow the title text and display the ellipsis '...'. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
How to remove news and trending content from Windows 11 Search
Oct 16, 2023 pm 08:13 PM
When you click the search field in Windows 11, the search interface automatically expands. It displays a list of recent programs on the left and web content on the right. Microsoft displays news and trending content there. Today's check promotes Bing's new DALL-E3 image generation feature, the "Chat Dragons with Bing" offer, more information about dragons, top news from the Web section, game recommendations, and the Trending Search section. The entire list of items is independent of your activity on your computer. While some users may appreciate the ability to view news, all of this is abundantly available elsewhere. Others may directly or indirectly classify it as promotion or even advertising. Microsoft uses interfaces to promote its own content,
iOS 17's standby mode turns a charging iPhone into a home hub
Jun 06, 2023 am 08:20 AM
In iOS 17 Apple is introducing Standby Mode, a new display experience designed for charging iPhones in a horizontal orientation. In this position, the iPhone is able to display a series of full-screen widgets, turning it into a useful home hub. Standby mode automatically activates on an iPhone running iOS 17 placed horizontally on the charger. You can view time, weather, calendar, music controls, photos, and more. You can swipe left or right through the available standby options and then long press or swipe up/down to customize. For example, you can choose from analog view, digital view, bubble font, and daylight view, where the background color changes based on time as time passes. There are some options
Windows 11 User Guide: How to disable ad pop-ups
Sep 22, 2023 pm 07:21 PM
Microsoft's Windows 11 operating system may periodically display suggestions as pop-ups on your computer using the notification system. The suggestions system, originally intended to provide users with tips and suggestions for improving their Windows 11 workflows, has almost completely transformed into an advertising system to promote Microsoft services and products. Suggestion pop-ups might advertise a Microsoft 365 subscription to users, suggest linking an Android phone to the device, or set up a backup solution. If these pop-ups annoy you, you can tweak your system to disable them entirely. The following guide provides recommendations on disabling pop-ups on devices running Microsoft’s Windows 11 operating system.
Reasons and solutions for desktop layout being locked
Feb 19, 2024 pm 06:08 PM
What happens when the desktop layout is locked? When using the computer, sometimes we may encounter the situation where the desktop layout is locked. This problem means that we cannot freely adjust the position of desktop icons or change the desktop background. So, what exactly is going on when it says that the desktop layout is locked? 1. Understand the desktop layout and locking functions. First, we need to understand the two concepts of desktop layout and desktop locking. Desktop layout refers to the arrangement of various elements on the desktop, including shortcuts, folders, widgets, etc. we can be free
How to turn on live captions instantly in Windows 11
Jun 27, 2023 am 08:33 AM
How to turn on live subtitles instantly in Windows 11 1. Press Ctrl+L on your keyboard 2. Click Agree 3. A popup will appear saying Ready to add subtitles in English (US) (depending on your preferred language) 4. Additionally, you can filter profanity by clicking the gear button? Preference? Filtering Swear Words Related Articles How to Fix Activation Error Code 0xc004f069 in Windows Server The activation process on Windows sometimes takes a sudden turn to display an error message containing this error code 0xc004f069. Although the activation process is online, some older systems running Windows Server may experience this issue. Pass these preliminary checks and if these checks do not
How to make a remote desktop connection display the other party's taskbar
Jan 03, 2024 pm 12:49 PM
There are many users using Remote Desktop Connection. Many users will encounter some minor problems when using it, such as the other party's taskbar not being displayed. In fact, it is probably a problem with the other party's settings. Let's take a look at the solutions below. How to display the other party's taskbar during Remote Desktop Connection: 1. First, click "Settings". 2. Then open "Personalization". 3. Then select "Taskbar" on the left. 4. Turn off the Hide Taskbar option in the picture.
How to check the current directory in Linux?
Feb 23, 2024 pm 05:54 PM
In Linux systems, you can use the pwd command to display the current path. The pwd command is the abbreviation of PrintWorkingDirectory and is used to display the path of the current working directory. Enter the following command in the terminal to display the current path: pwd After executing this command, the terminal will display the full path of the current working directory, such as: /home/user/Documents. In addition, you can use some other options to enhance the functionality of the pwd command. For example, the -P option can display
How to display the wifi password QR code? It is recommended to scan the wifi password on WeChat in 3 seconds.
Feb 20, 2024 pm 01:42 PM
You don’t need to enter the WIFI password often, so it’s normal to forget it. Today I will teach you the simplest way to find the password of your own WIFI. It can be done in 3 seconds. To check the WIFI password, use WeChat to scan it. The premise of this method is: there must be a mobile phone that can connect to WIFI. Okay, let’s start the tutorial: Step 1. We enter the phone, pull down from the top of the phone, bring up the status bar, and the WIFI icon. Step 2. Long press the WIFI icon to enter the WLAN settings; long press the WIFI icon. Step 3. Click Connected. Enter the WIFI name of your home, click Share Password, and a QR code will pop up; Step 4 of sharing WIFI password, we take a screenshot and save this QR code; Step 5, long press the WeChat icon on the desktop, and click Scan
