HTML内の英単語を改行せずに表示する方法-フロントエンドQ&A-php.cn

HTML内の英単語を改行せずに表示する方法

WBOY

リリース： 2022-03-28 14:18:13

オリジナル

4515 人が閲覧しました

html英単語を改行せずに表示する方法: 1. word-break 属性を使用して、英単語要素に「word-break:keep-all;」スタイルを追加します。 2. word-wrap 属性を使用します。追加する英単語要素に「word-wrap:normal;」スタイルを追加するだけです

HTML内の英単語を改行せずに表示する方法

この記事の動作環境：Windows 10系、html5バージョン、Dell G3 コンピュータ。

html英単語を改行せずに表示する方法

##1. word-break 属性は、自動改行の処理方法を指定します。

word-break 属性を使用すると、ブラウザに任意の位置で改行を実装させることができます。

Syntax

word-break: normal|break-all|keep-all;

ログイン後にコピー

normal ブラウザのデフォルトの改行を使用します。 .
Break-all は単語内での改行を許可します。
keep-all は半角スペースまたはハイフンでのみ改行を許可します。

例は次のとおりです:

<html>
<head>
</head>
<body>
<p style="width:11em;border:1px solid #000000;word-break:keep-all;">This is a veryveryveryvery veryveryveryveryveryvery long paragraph.</p>
<p style="width:11em;border:1px solid #000000;word-break:break-all;">This is a veryveryveryvery veryveryveryveryveryvery long paragraph.</p>
</body>
</html>

ログイン後にコピー

出力結果:

HTML内の英単語を改行せずに表示する方法

2。 word-wrap 属性では、長い単語や URL アドレスを次の行に折り返すことができます。

文法

word-wrap: normal|break-word;

ログイン後にコピー

normal 許可されたハイフネーション位置でのみ改行します (ブラウザはデフォルトの処理を維持します)。

break-word 長い単語や URL アドレス内での改行。

例は次のとおりです。

<html>
<head>
</head>
<body>
<p style="width:11em;border:1px solid #000000;word-wrap:normal;">This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p>
</body>
</html>

ログイン後にコピー

出力結果:

HTML内の英単語を改行せずに表示する方法 ##推奨チュートリアル: 「