HTML の長いテキストは、タグの幅を超えると自動的に切り捨てられます。

HTML の長いテキストは、タグの幅を超えると自動的に切り捨てられます。
長いテキストを表示する場合、C# 側で文字をインターセプトする必要があることがよくありますが、長いテキストは HTML タグで表されることが多いため、これは決して良いことではありません。適切に読み込まれないと、文字化けした文字が表示されます (HTML タグの半分が表示されます)。より良い方法は、この機能を CSS で実装することです。
span タグが制限を超えると、コンテンツは自動的に折り返されます。

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

white-space:nowrap;white-space:norma;display:inline-block;

行が自動的に非表示になる領域を超えると、行には表示されません(ブロック要素内にある必要があります)

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

オーバーフロー:非表示;空白:折り返しなし;

テキストの後に...を追加したい場合は、text-overflow: ellipsisを使用できます。ほとんどの主流ブラウザはこの属性をサポートしています。

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

.tbconxx {
フロート: 左;
幅: 255px;
パディング: 5px 10px;
}
.tbconxx li、tbconxx span {
左パディング: 7px;
テキストオーバーフロー: 省略記号;
オーバーフロー: 非表示;
表示: ブロック;
空白: ラップなし;
幅: 240ピクセル;
}

これにより、制限を超えたテキストが自動的に非表示になります。

<<:  MySQL InnoDB アーキテクチャの概要

>>:  Vue3でアイコンを使用する2つの例

推薦する

動的なデジタル時計を実装するJavaScript

この記事では、JavaScriptで動的なデジタル時計を実装するための具体的なコードを参考までに紹介...

Centos7 から Centos8 へのアップグレードに関するチュートリアル (画像とテキスト付き)

正式な環境でアップグレードする場合は、データと重要な設定をバックアップしてください。アップグレードに...

1 行または複数行のテキストがオーバーフローしたときに省略記号を表示する CSS を実装する方法

1. 単一行オーバーフロー1. 1 行がオーバーフローした場合、超過部分は表示されます...または、...

ユニアプリプロジェクトでのウォーターフォールレイアウトの実装

GitHubアドレス、気に入ったらスターを付けてくださいプラグインのプレビューチュートリアル1. プ...

MySQLパーティションテーブルの詳細な説明

序文:パーティショニングはテーブル設計パターンです。一般的に、テーブル パーティショニングとは、条件...

ウェブサイトをより高く、よりデザイン的に見せる方法

「ウェブサイトを高級感のあるものにするにはどうすればいいでしょうか? それともデザイン重視にすればい...

SpringBoot と Docker の統合の詳細なプロセス

目次1. デモプロジェクト1.1 インターフェースの準備1.2 構成の準備2. Dockerがリモー...

WIN10 での JDK インストールと環境変数の設定手順 (詳細版)

目次1. JDKをダウンロードする(例としてjdk1.8.0を使用する) 2. JDK をインストー...

MySQLインデックスの基礎となるデータ構造の詳細

目次1. インデックスの種類1. B+ツリー2. MyISAM と InnoDB の B+ ツリー ...

文字列の最初の文字を取得してテキストアイコン機能を実現する純粋なCSS

CSS でテキストアイコンを実装する方法 /*アイコンスタイル*/ .nav-icon-norma...

nginx と Tencent Cloud の無料証明書を使用して https を作成する方法

httpsを取得する方法を勉強しています。最近、Tencent Cloud が提供する無料の SSL...

Nginx を使用して IP アドレスが悪意を持って解決されるのを防ぐ方法

Nginxを使用する目的Alibaba Cloud ECS クラウド サーバーを使用して、まずは著者...

dockerがredisを再起動するとmysqlデータが失われる問題を解決する

公式ドキュメント:したがって、mysql は次のように起動する必要があります。 docker run...

CSS マルチカラムレイアウトソリューション

1. 固定幅+適応型期待される効果: 左側は固定幅、右側は適応幅 共通コード: html: <...

mysql8.0.11クライアントがログインできない問題の解決方法

この記事では、mysql8.0.11クライアントがログインできない問題の解決策を紹介します。参考まで...