Home > Web Front-end > HTML Tutorial > How to set text beyond line break in html

How to set text beyond line break in html

青灯夜游
Release: 2021-12-14 15:19:36
Original
13623 people have browsed it

In html, you can use the word-wrap, word-break and overflow attributes to set the text beyond the line break. Just add "word-wrap:break-word;word-break:break-all;overflow:" to the text element. hidden;" style.

How to set text beyond line break in html

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

I encountered a problem today, as shown in the picture:

How to set text beyond line break in htmlHow to set text beyond line break in html

This causes the effect to look very unsightly. Our ideal state should be to let If the content inside the div exceeds the width of the div, the content should be wrapped and displayed.

Solution:

First we have to make sure that the div has a width, and then add the css style: the code is as follows:

word-wrap:break-word; 
word-break:break-all; 
overflow: hidden;
Copy after login

Result As follows:

How to set text beyond line break in html

This will achieve the effect we want.

Recommended tutorial: "html video tutorial"

The above is the detailed content of How to set text beyond line break in html. 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