What to do if css text does not wrap-Front-end Q&A-php.cn

Home

Web Front-end

Front-end Q&A

What to do if css text does not wrap

藏色散人

May 27, 2021 am 11:59 AM

css

The solution to css text not wrapping: first create an HTML sample file; then create an image and text content in the body; finally use the CSS attribute "word-break:break-all;" in the appropriate Just break the line at the hyphenation point.

What to do if css text does not wrap

# Operating environment for this article: Windows 7 system, HTML5&&CSS3 version, DELL G3 computer

css to implement text wrapping around images, --encountering problems and canceling the text wrapping effect

I encountered a problem when I was writing a foreign blog. Regarding the problem of text wrapping and display:

1.图片浮动，中文文字会发生环绕效果
<!DOCTYPE html>
<html>
<head>
    <title>css文字环绕</title>
    <style>
        .img-left{
            border:3px solid #005588;
            width:300px;
        }
        .img-left img{
            float:left;
            width:150px;
        }
    </style>
</head>
<body>
    <div class=&#39;img-left&#39;>
        <img  src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/020/b7415631037c9b56354621a67d820719-0.jpg?x-oss-process=image/resize,p_40"  class="lazy"  src=&#39;1.jpg&#39; alt="What to do if css text does not wrap" >
            这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文
    </div>
</body>
</html>

The resulting page effect is:

What to do if css text does not wrap ## Then change the Chinese to English:

<!DOCTYPE html>
<html>
<head>
    <title>数组去重</title>
    <style>
        .img-left{
            border:3px solid #005588;
            width:300px;
        }
        .img-left img{
            float:left;
            width:150px;
        }
    </style>
</head>
<body>
    <div class=&#39;img-left&#39;>
        <img  src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/020/b7415631037c9b56354621a67d820719-1.jpg?x-oss-process=image/resize,p_40"  class="lazy"  src=&#39;1.jpg&#39; alt="What to do if css text does not wrap" >
            aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
            aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
            aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
            aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
            aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
    </div>
</body>
</html>

The following is the page effect:

What to do if css text does not wrap

So how to solve this problem:

We can use CSS attributes: word- break:break-all; Line break at the appropriate hyphenation point

For example:

<!DOCTYPE html>
<html>
<head>
    <title>数组去重</title>
    <style>
        .img-left{
            border:3px solid #005588;
            width:300px;
        }
        .img-left img{
            float:left;
            width:150px;
        }
        .img-left{
            word-break:break-all;
        }
    </style>
</head>
<body>
    <div class=&#39;img-left&#39;>
        <img  src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/020/b7415631037c9b56354621a67d820719-2.jpg?x-oss-process=image/resize,p_40"  class="lazy"  src=&#39;1.jpg&#39; alt="What to do if css text does not wrap" >
            aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
            aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
            aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
            aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
            aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
    </div>
</body>
</html>

The result is:

What to do if css text does not wrap

So how to cancel the text wrapping effect?

(1) Add a p tag outside the text, and then set the style to overflow:hidden to make the box an insulated container

For example:

<!DOCTYPE html>
<html>
<head>
    <title>数组去重</title>
    <style>
        .img-left{
            border:3px solid #005588;
            width:300px;
        }
        .img-left img{
            float:left;
            width:150px;
        }
        .img-left{
            word-break:break-all;
        }
        .a{
            overflow:hidden;
        }
    </style>
</head>
<body>
    <div class=&#39;img-left&#39;>
        <img  src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/020/1bab4c46278d46dc18e421e98cc0b415-3.jpg?x-oss-process=image/resize,p_40"  class="lazy"  src=&#39;1.jpg&#39; alt="What to do if css text does not wrap" >
        <div class=&#39;a&#39;>
            aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
            aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
            aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
            aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
            aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
        </div>
    </div>
</body>
</html>

The result is:

What to do if css text does not wrap (2) You can also add margin to the box where the text is located, or separate it from the left and right sides of the image, so that there will be no wrapping effect

Recommendation: "

HTML video tutorial

》《css video tutorial》

The above is the detailed content of What to do if css text does not wrap. For more information, please follow other related articles on the PHP Chinese website!

Statement

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

The Size of React's Ecosystem: Navigating a Complex LandscapeApr 28, 2025 am 12:21 AM

TonavigateReact'scomplexecosystemeffectively,understandthetoolsandlibraries,recognizetheirstrengthsandweaknesses,andintegratethemtoenhancedevelopment.StartwithcoreReactconceptsanduseState,thengraduallyintroducemorecomplexsolutionslikeReduxorMobXasnee

How React Uses Keys to Identify List Items EfficientlyApr 28, 2025 am 12:20 AM

Reactuseskeystoefficientlyidentifylistitemsbyprovidingastableidentitytoeachelement.1)KeysallowReacttotrackchangesinlistswithoutre-renderingtheentirelist.2)Chooseuniqueandstablekeys,avoidingarrayindices.3)Correctkeyusagesignificantlyimprovesperformanc

Debugging Key-Related Issues in React: Identifying and Resolving ProblemsApr 28, 2025 am 12:17 AM

KeysinReactarecrucialforoptimizingtherenderingprocessandmanagingdynamiclistseffectively.Tospotandfixkey-relatedissues:1)Adduniquekeystolistitemstoavoidwarningsandperformanceissues,2)Useuniqueidentifiersfromdatainsteadofindicesforstablekeys,3)Ensureke

React's One-Way Data Binding: Ensuring Predictable Data FlowApr 28, 2025 am 12:05 AM

React's one-way data binding ensures that data flows from the parent component to the child component. 1) The data flows to a single, and the changes in the state of the parent component can be passed to the child component, but the child component cannot directly affect the state of the parent component. 2) This method improves the predictability of data flows and simplifies debugging and testing. 3) By using controlled components and context, user interaction and inter-component communication can be handled while maintaining a one-way data stream.

Best Practices for Choosing and Managing Keys in React ComponentsApr 28, 2025 am 12:01 AM

KeysinReactarecrucialforefficientDOMupdatesandreconciliation.1)Choosestable,unique,andmeaningfulkeys,likeitemIDs.2)Fornestedlists,useuniquekeysateachlevel.3)Avoidusingarrayindicesorgeneratingkeysdynamicallytopreventperformanceissues.

Optimizing Performance with useState() in React ApplicationsApr 27, 2025 am 12:22 AM

useState()iscrucialforoptimizingReactappperformanceduetoitsimpactonre-rendersandupdates.Tooptimize:1)UseuseCallbacktomemoizefunctionsandpreventunnecessaryre-renders.2)EmployuseMemoforcachingexpensivecomputations.3)Breakstateintosmallervariablesformor

Sharing State Between Components Using Context and useState()Apr 27, 2025 am 12:19 AM

Use Context and useState to share states because they simplify state management in large React applications. 1) Reduce propdrilling, 2) The code is clearer, 3) It is easier to manage global state. However, pay attention to performance overhead and debugging complexity. The rational use of Context and optimization technology can improve the efficiency and maintainability of the application.

The Impact of Incorrect Keys on React's Virtual DOM UpdatesApr 27, 2025 am 12:19 AM

Using incorrect keys can cause performance issues and unexpected behavior in React applications. 1) The key is a unique identifier of the list item, helping React update the virtual DOM efficiently. 2) Using the same or non-unique key will cause list items to be reordered and component states to be lost. 3) Using stable and unique identifiers as keys can optimize performance and avoid full re-rendering. 4) Use tools such as ESLint to verify the correctness of the key. Proper use of keys ensures efficient and reliable React applications.

See all articles