How to handle long data when displaying it in html

How to handle long data when displaying it in html
When displaying long data in HTML, you can cut off the data and display the complete data when the mouse moves over it.
For example, consider the following situation.

accomplish:

Copy code
The code is as follows:

<a title="${siteBoardInfoList.boardUrl}">
<c:if test="${fn:length(siteBoardInfoList.boardUrl) >= 40}">
${fn:substring(siteBoardInfoList.boardUrl,0,20)}......${fn:substring(siteBoardInfoList.boardUrl,fn:length(siteBoardInfoList.boardUrl)-21,fn:length(siteBoardInfoList.boardUrl))}
</c:if>
<c:if test="${fn:length(siteBoardInfoList.boardUrl) < 40}">
${siteBoardInfoList.boardUrl}
</c:if>
</a>

<<:  How to implement digital paging effect code and steps in CSS

>>:  Summary of the dockerfile-maven-plugin usage guide

Recommend

How to implement real-time polygon refraction with threejs

Table of contents Preface Step 1: Setup and front...

mysql8.0 windows x64 zip package installation and configuration tutorial

MySQL 8 Windows version zip installation steps (d...

Complete example of Vue encapsulating the global toast component

Table of contents Preface 1. With vue-cli 1. Defi...

Pure CSS to achieve candle melting (water droplets) sample code

Achieve results Implementation ideas The melting ...

How to run Python script on Docker

First create a specific project directory for you...

Full analysis of web page elements

Relative Length Units em Description: Relative len...

Definition and usage of MySQL cursor

Creating a Cursor First, create a data table in M...

CSS horizontal progress bar and vertical progress bar implementation code

Sometimes it’s nice to see some nice scroll bar e...

Promise encapsulation wx.request method

The previous article introduced the implementatio...

An article to teach you HTML

If you are not committed to becoming an artist, t...