長いデータを HTML で表示するときに処理する方法

長いデータを HTML で表示するときに処理する方法
HTML で長いデータを表示する場合、マウスをその上に移動するとデータを切り捨てて完全なデータを表示できます。
たとえば、次の状況を考えてみましょう。

成し遂げる:

コードをコピー
コードは次のとおりです。

<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>

<<:  CSS でデジタル ページング効果のコードと手順を実装する方法

>>:  dockerfile-maven-plugin 使用ガイドの概要

推薦する

バッチファイルを処理するLinuxの1行コマンドの詳細な説明

序文最良の方法は、あなたが思いつく最も速い方法ではないかもしれません。職場で一時的に使用するスクリプ...

Dockerfile を使用して nginx イメージを構築する例

Dockerfile の紹介Docker は、Dockerfile の内容を読み取ってイメージを自動...

js はマウスインとマウスアウトによるカード切り替えコンテンツを実装します

この記事では、マウスでカード内外のコンテンツを切り替えるためのjsの具体的なコードを紹介します。具体...

HTML の表のフレームとルール属性の詳細な説明

テーブル タグの frame 属性と rules 属性は境界線の表示を制御できます。フレーム プロパ...

echarts ワードクラウドチャートを使用した Vue の実践記録

echartsワードクラウドはechartsの拡張版ですhttps://echarts.apache...

Vueは書籍ショッピングカートの機能を実現

この記事の例では、書籍ショッピングカート機能を実現するためのVueの具体的なコードを参考までに共有し...

docker-compose を使用して mongodb と mysql を構築する詳細なプロセス

docker-compose で mongodb と mysql を構築する詳細な方法を見てみましょ...

Linuxのsortコマンドの複数のパラメータを理解するための1つの質問

sort コマンドは非常によく使用されますが、-o、-n、-u、-r などの多くのパラメーターがあり...

MySQL クエリ キャッシュのグラフィカルな説明

目次1. 原則の概要クエリキャッシュシステム変数1. クエリキャッシュを持つ2. クエリキャッシュ制...

優れたグラフィックデザイナーが習得すべき7つのスキル

1》ウェブデザインが得意であること2》Webページのデザイン方法を知る3》計画する4. SEOを理解...

JS で Websocket ベースのマルチターミナル ブリッジング プラットフォームを実装する方法

目次1. デバッグ対象2. WebSocketの機能3. ソケット接続を確立する3.1 部屋の作成方...

JavaScript でピンボール ゲームの Web バージョンを実装する

参考までに、JavaScriptのオブジェクトとメソッドを使用して実装されたWebピンボールゲームを...

reduxの動作原理と使い方の説明

目次1. redux とは何ですか? 2. 還元の原則3. redux の使い方は? (1)redu...

本番環境でのMySQLパラメータsql_safe_updatesの使用に関する詳細な説明

序文アプリケーションのバグや DBA の誤操作が発生した場合、テーブル全体が更新される可能性がありま...

10分でCSS3グリッドレイアウトを理解する

基本的な紹介前回の記事では、CSS3 のフレックスボックスを紹介しました。今日は、CSS3 のもう ...