Home > Web Front-end > Front-end Q&A > How to display English words in html without line breaks

How to display English words in html without line breaks

WBOY
Release: 2022-03-28 14:18:13
Original
4528 people have browsed it

htmlHow to display English words without line breaks: 1. Use the word-break attribute to add the "word-break:keep-all; style to the English word element; 2. Use the word-wrap attribute to add Just add the "word-wrap:normal;" style to the English word element.

How to display English words in html without line breaks

The operating environment of this article: Windows 10 system, html5 version, Dell G3 computer.

htmlHow to display English words without line breaks

1. The word-break attribute specifies the processing method of automatic line breaks.

By using the word-break attribute, you can Let the browser implement line breaks at any position

Syntax

word-break: normal|break-all|keep-all;
Copy after login
  • normal Use the browser's default line breaks.

  • break-all allows line breaks within words.

  • keep-all allows line breaks only at half-width spaces or hyphens.

Examples are as follows:

<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>
Copy after login

Output result:

How to display English words in html without line breaks

2. The word-wrap attribute allows long words or URL addresses to be wrapped to the next line.

Grammar

word-wrap: normal|break-word;
Copy after login

normal Only breaks lines at allowed hyphenation points (browser keeps default processing).

break-word Line breaks inside long words or URL addresses .

The example is as follows:

<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>
Copy after login

Output result:

How to display English words in html without line breaks

##Recommended tutorial: "

html video tutorial"

The above is the detailed content of How to display English words in html without line breaks. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template