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つの例

推薦する

MySQL デッドロック ルーチン: 一意のインデックスの下でのバッチ挿入順序の不一致

序文デッドロックの本質はリソースの競合です。バッチ挿入の順序が一貫していないと、デッドロックに陥りや...

マテリアルデザインで水滴アニメーションボタンを実現するための純粋なCSS

序文こういう特殊効果ってよく見かけますよね。すごくかっこいいですよね。 これは、Google Mat...

React コードを共有するためのベストプラクティス

プロジェクトがある程度複雑になると、必然的にロジックの再利用の問題に直面することになります。 Rea...

Tomcat 初回展開 Web プロジェクト プロセス図

独自のWebプロジェクトをtomcatディレクトリの下のwebappsディレクトリに配置します。 R...

Docker Compose で利用可能な環境変数の詳細な説明

Compose のいくつかの部分は、何らかの方法で環境変数を扱います。このチュートリアルは、必要な情...

Access_Tokenの統合管理を実現するミニプログラム開発

目次TOKEN タイマーリフレッシュ2. access_tokenの内部設計2.1 access_t...

MySQL 5.7.20 のインストールと設定方法のグラフィック チュートリアル (win10)

この記事では、MySQL 5.7.20のインストールと設定方法を参考までに紹介します。具体的な内容は...

Docker コンテナは実行後に終了します (実行を継続する方法)

現象Dockerコンテナを起動する docker run –name [コンテナ名] [コンテナID...

LinuxシステムでのSystemC環境設定方法

以下はcentos7での設定方法ですsystemc ソース パッケージをダウンロード: System...

フォームを送信した後、別のファイルに移動する

<br />質問:特定のファイルにジャンプするには、HTML でどのように記述すればよい...

JavaScript の new 演算子を自分で実装する方法

目次コンストラクタ新しいオペレーター自分で新しいものを実装するコンストラクタnew を導入する前に、...

CSS 水平プログレスバーと垂直プログレスバーの実装コード

時々、素敵なスクロールバー効果を見るのは楽しいものです。ここでは、CSSを使用してそれを実現する方法...

MySQL 5.7.17 のインストールと設定方法のグラフィックチュートリアル

この記事では、MySQL 5.7.17のインストールと設定方法を参考までに紹介します。具体的な内容は...

メニューのホバー効果を実現するCSS3

結果: html <nav id="nav-1"> <a cl...

Ubuntu で .sh ファイルを実行するいくつかの方法の違いについて簡単に説明します。

序文特に bash 環境では、スクリプトの実行方法によって結果が異なります。スクリプトを実行する方法...