How To Wrap The Text Around An Image Using HTML And CSS

Trang chủ » Html Wrap Text Around Image W3schools » How To Wrap The Text Around An Image Using HTML And CSS

Có thể bạn quan tâm

Skip to content geeksforgeeks
  • Courses
    • DSA Courses
    • Programming Languages
  • Tutorials
    • Python Tutorial
      • Python Loops and Control Flow
    • Java
      • Java Interview Questions
      • Java Quiz
      • Advance Java
    • Programming Languages
    • System Design
    • Interview Corner
    • Computer Science Subjects
    • DevOps
    • Linux
    • Software Testing
    • Databases
    • Android
    • Excel
    • Mathematics
  • DSA
    • Data Structures
    • Algorithms
      • Analysis of Algorithms
      • Searching Algorithms
      • Sorting Algorithms
    • Practice
      • Company Wise Coding Practice
      • Practice Problems Difficulty Wise
      • Language Wise Coding Practice
      • Curated DSA Lists
    • Company Wise SDE Sheets
    • DSA Cheat Sheets
    • Puzzles
  • Data Science
    • Data Science Packages
    • Data Visualization
    • Data Analysis
  • Web Tech
    • Web Development Using Python
      • Django
      • Flask
    • Cheat Sheets
  • CSS Tutorial
  • CSS Exercises
  • CSS Interview Questions
  • CSS Selectors
  • CSS Properties
  • CSS Functions
  • CSS Examples
  • CSS Cheat Sheet
  • CSS Templates
  • CSS Frameworks
  • Bootstrap
  • Tailwind
  • CSS Formatter
▲ Open In App How to wrap the text around an image using HTML and CSS ? Last Updated : 11 Jan, 2024 Summarize Comments Improve Suggest changes Like Article Like Save Share Report Follow

Wrapping the text around an image is quite attractive for any kind of website. By using HTML and CSS wrapping an image with the text is possible and there are many ways to do so because the shape of any image is not constant. In HTML :

  • You can also use CSS shape-outside Property depending on the shape of your image.
  • Align images to the right, left, or center in HTML for diverse layouts.Below examples illustrate the above approach:

Example 1: In this example, the image is floating right side of the screen and the text is wrapping the image. We don’t require shape-outside property here because the shape image is usual(square).

HTML

<!DOCTYPE html> <html> <head> <title> Wrapping an Image with the text </title> <style> body { margin: 20px; text-align: center; } h1 { color: green; } img { float: left; margin: 5px; } p { text-align: justify; font-size: 25px; } </style> </head> <body> <h1>GeeksforGeeks</h1> <b> A Computer Science Portal for Geeks </b> <div class="square"> <div> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20190808143838/logsm.png" alt="Longtail boat in Thailand"> </div> <p> How many times were you frustrated while looking out for a good collection of programming/algorithm /interview questions? What did you expect and what did you get? This portal has been created to provide well written, well thought and well explained solutions for selected questions. An IIT Roorkee alumnus and founder of GeeksforGeeks. He loves to solve programming problems in most efficient ways. Apart from GeeksforGeeks, he has worked with DE Shaw and Co. as a software developer and JIIT Noida as an assistant professor. It is a good platform to learn programming. It is an educational website. Prepare for the Recruitment drive of product based companies like Microsoft, Amazon, Adobe etc with a free online placement preparation course. </p> </div> </body> </html>

Output:  

Example 2: In this example, we will wrap different shape images and here we will use CSS shape-outside property for the better viewing experience. 

HTML

<!DOCTYPE html> <html> <head> <title> Wrapping an Image with the text </title> <style> body { margin: 20px; text-align: center; } h1 { color: green; } /* This div design part is used as an Image */ .round { width: 200px; height: 200px; border-radius: 50%; text-align: center; font-size: 30px; float: left; font-weight: bold; /* Change the shape according to the image */ shape-outside: circle(); background-color: Green; color: white; } article { padding-top: 75px; display: inline-block; } p { text-align: justify; font-size: 22px; } </style> </head> <body> <h1>GeeksforGeeks</h1> <b> A Computer Science Portal for Geeks </b> <div class="round"> <article>GeeksforGeeks</article> </div> <p> How many times were you frustrated while looking out for a good collection of programming/ algorithm/ interview questions? What did you expect and what did you get? This portal has been created to provide well written, well thought and well explained solutions for selected questions. An IIT Roorkee alumnus and founder of GeeksforGeeks. He loves to solve programming problems in most efficient ways. Apart from GeeksforGeeks, he has worked with DE Shaw and Co. as a software developer and JIIT Noida as an assistant professor. It is a good platform to learn programming. It is an educational website. Prepare for the Recruitment drive of product based companies like Microsoft, Amazon, Adobe etc with a free online placement preparation course. </p> </body> </html>

Output:  

Example 3: Using table tag we are going to create a table and inside tables one column we will put image and into another column whatever information you want to insert.

HTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Text around image</title> </head> <body> <h1 style="color: green; text-align: center;"> GeeksforGeeks </h1> <h3 style="color: black; text-align: center;"> A computer science portal </h3> <br> <table cellspacing="10"> <tr> <td> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20190808143838/logsm.png" alt="Longtail boat in Thailand"> </td> <td> <p> How many times were you frustrated while looking out for a good collection of programming/ algorithm/ interview questions? What did you expect and what did you get? This portal has been created to provide well written, well thought and well explained solutions for selected questions. An IIT Roorkee alumnus and founder of GeeksforGeeks. He loves to solve programming problems in most efficient ways. Apart from GeeksforGeeks, he has worked with DE Shaw and Co. as a software developer and JIIT Noida as an assistant professor. It is a good platform to learn programming. It is an educational website. Prepare for the Recruitment drive of product based companies like Microsoft, Amazon, Adobe etc with a free online placement preparation course. </p> </td> </tr> </table> </body> </html>

Output : 

S

sdutta203sagnik Follow Improve Next Article How to Add Image in Text Background using HTML and CSS ?

Similar Reads

How to Wrap Text Around Image in Bootstrap ? To wrap text around an image in Bootstrap 5, you can apply the 'float' utility classes along with the 'img-fluid' class for responsive images. This technique involves floating the image to the left or right and creating margins to allow the text to wrap around it. ApproachThe code uses Bootstrap 5 classes like container, row, and col-lg class to st 3 min read How to wrap text around circular carousel in Bootstrap 4 ? Wrapping up a circular carousel is quite hectic compare to wrapping up a circular image or any shape of the image. In this article first, we have to create a carousel to make that circular, then we can use the text to wrap the carousel. First, you have to create Bootstrap Carousel. To make that carousel circular you can use CSS border-radius proper 2 min read How to wrap text inside and outside box using CSS ? In CSS, controlling how text wraps inside and outside a box is essential for creating a visually appealing and readable layout. When the content of a text element is too long to fit in its container, text wrapping comes into play. Using properties like word-wrap, word-break, and overflow-wrap, developers can ensure that text is displayed consistent 2 min read How to wrap a text in a <pre> tag using CSS ? In this article, we will learn how to wrap a text in a <pre> tag. The <pre> tag is used to display the block of preformatted text which preserves the text spaces, line breaks, tabs, and other formatting characters which are ignored by web browsers. By default, the <pre> tag does not support the <pre> tag. In the case of rend 2 min read How to remove outline around text input boxes in chrome using CSS? Generally in the case of Google Chrome Browser, when the input field gets focus then the blue outline occurred on the border of the Input fields. The Task can be done by using the CSS outline property. Example: C/C++ Code <html> <head> <title> How to remove outline around text input boxes in chrome using CSS? </title> <st 1 min read How to Add Border Around Text using CSS? The CSS border property is used to add a border around text by wrapping the text in an HTML element like <span> or <p>. Syntax border: "borderWidth borderStyle colorName;"Example 1: Adding a border around the text content using CSS. [GFGTABS] HTML <p> The following text has a border <span style="border: 2px solid green; pa 1 min read How to Wrap Text in HTML? To wrap text in HTML, you can use the default behaviour of block-level elements like <p>, <div>, and <h1>, which automatically wrap text to fit within their parent container. For more control over text wrapping, you can use CSS properties like word-wrap, white-space, and overflow-wrap to determine how the text behaves inside an el 3 min read Which tag captures only the space around the text in HTML ? In this article, we will discuss the tags that capture only the space around the text in HTML. in this article, we will see different methods for creating space around the text in HTML. Method 1: Using the special characters designated for different spaces. The character entity "&nbsp" is used to denote a non-breaking space which is a fixed spa 3 min read How to create a Border around an HTML Element using CSS ? Creating a border around an HTML element in CSS involves using the border property. This property allows you to define the style, color, and width of the border surrounding the selected element. The border property can be used in a shorthand form or separately for individual properties. Syntax/* Shorthand syntax */.box { border: 2px solid #333;}OR/ 1 min read How to Wrap or Break long Text/word in a Fixed Width Span ? Wrapping or breaking long text/words in a fixed-width span means controlling how text flows within a limited container. Using CSS properties like word-wrap: break-word; or overflow-wrap: break-word;, long words break to fit within the container's width. Here we have some approaches to wrap or break long text/word in a fixed width span : Table of Co 2 min read How to Wrap Table Cell td Content using CSS? The word-wrap, and word-break properties in CSS are used to wrap content within a table cell (<td>). [GFGTABS] HTML <h3 style="text-align:center;"> Simple Example Without Word Wrap </h3> <table width="600" style="border-spacing: 0px; table-layout: fixed; margin-left:auto; margin-right:auto;"> 3 min read How to Remove Focus Border(Outline) Around Text/Input Boxes? To control the border and outline, the CSS property is used. To remove the focus border (outline) from text/input boxes, the outline and border property is used. Remove Focus Border/Outline Around TextAreaThe CSS property outline: none; and border:none; within the :focus selector to remove the outline of input textarea. This prevents the default ou 3 min read How to create long shadow of text without using text-shadow in HTML and CSS ? Shadows are really a nice way to give depth and 3-D look to any text. Generally, we use text-shadow to give shadow to the text but this shadow is short and to create long shadow (shadow in which text is visible like that of reflection) we have to use before selector and skew function. Approach: The approach is to use a skew to create tilted text fi 2 min read Text Animation with changing the color of the text using HTML and CSS Text animation is the creation of beautiful and colorful letters, words, and paragraphs with a decorative movable effect. The movement can be seen in some fashion within the area or across the screen following some regular pattern. The @keyframes in CSS allows defining a series of animations at specific points during an animation sequence. In this 2 min read How to Create an Image as Border Around Element? To create an image as a border around an element, you can use the border-image CSS property, which allows an image to be used in place of a standard border. Syntax: border-image: url(image-path.png);Adding Image as a Border Around an ElementCreate a box using an <div> element in your HTML to hold the content you want.Use CSS to define the box 1 min read How to Add Image in Text Background using HTML and CSS ? In this article, we will use HTML and CSS to set the image in the text background. To set the image in the text background, some CSS property is used. To add an image in the text background using HTML and CSS, create a container element (e.g., a `<div>`), set its background to the desired image using CSS ('background-image property), and adju 2 min read How To Place Text on Image using HTML and CSS? To place text on an image using HTML and CSS, you can use different techniques to make the text look good and easy to read. Here, we will explore two approaches for placing text over an image using simple HTML and CSS. 1. Using Absolute Positioning This approach uses absolute positioning to place the text directly on top of the image. The container 3 min read How to set padding around an element using CSS ? In this article, we will learn How to set the padding around an element using CSS. Approach: The padding is the space between the content of the element and its boundaries. We can set the padding around an element using the padding property of the CSS. It takes four values top_padding, right_padding, bottom_padding, and, left_padding. Syntax: paddi 1 min read How to eliminate blue border around linked Images using CSS ? In this article, we learn about the elimination of blue borders around linked images using CSS, When you add a hyperlink to an image some old browsers render a hyperlinked image by automatically adding a blue border around the image. This behavior is similar to the use of blue underlining and font color to highlight hyperlinked text. Though most mo 2 min read Creating Glowing Border Effect Around Input Fields using CSS In this article, we see how to create a glowing border around an input field using CSS properties. To accomplish this task, we will be using some CSS properties like border-color, box-shadow, and :focus pseudo-class to the <input> element. Approach: The following approach will be used to create the Glowing Border around an input field: The :f 3 min read What is the difference between “word-break: break-all” versus “word-wrap: break-word” in CSS ? The word-break property in CSS is used to specify how a word should be broken or split when reaching the end of a line. The word-wrap property is used to split/break long words and wrap them into the next line. Difference between the "word-break: break-all;" and "word-wrap: break-word;" word-break: break-all; It is used to break the words at any ch 2 min read CSS | overflow-wrap Property The overflow-wrap property in CSS is used to specify that the browser may break lines of text inside any targeted element to prevent overflow when the original string is too long to fit. This property was earlier known as word-wrap that still supported by some browsers but it was renamed to overflow-wrap in a CSS3 draft. Syntax: .box{ overflow-wrap 1 min read Tailwind CSS Flex Wrap The CSS flexbox is a vital feature to develop the frontend, there are three wraps available in CSS so in tailwind CSS all the properties are covered as in class form. It is the alternative of CSS flex-wrap Property for fast development of front-end. Note: To activate the flex-wrap you have to include the flex class in your element before the flex-w 2 min read How to wrap an element with more content in flexbox container to have the same width as other elements in CSS ? In a flexbox container, we might have a scenario where you want to wrap an element with more content, such as text or an image, to have the same width as other elements. In this article, we will see how to wrap an element with more content in a flexbox container to have the same width as other elements using CSS. The flexbox or flexible box model i 3 min read Explain the use of the word-wrap Property in CSS The word-wrap property in CSS is used to control how long words should behave when they exceed the width of their container. It is especially useful for preventing long words or strings of text from breaking the layout by overflowing their container. Syntax:The word-wrap property can take two values: normal: The default value, where long words may 1 min read How to Specify an Element After which to Wrap in CSS Flexbox? Flexbox is a powerful CSS layout tool that helps create flexible and responsive designs easily. One of its features is the ability to control the wrapping of items within a flex container. In this article, we are going to learn how to specify an element after which the wrapping should occur in a CSS Flexbox layout. When using Flexbox, items are typ 3 min read CSS word-wrap Property The word-wrap property in CSS is used to manage the breaking and wrapping of long words within an element, ensuring that the content fits within its container. This property is essential for maintaining readability and layout integrity when dealing with lengthy words or strings without spaces. Syntaxword-wrap: normal|break-word|initial|inherit;Prop 2 min read CSS flex-wrap property The CSS flex-wrap property is used to specify whether flex items are forced into a single line or wrapped onto multiple lines. The flex-wrap property enables the control direction in which lines are stacked. It is used to designate a single-line or multi-line format to flex items inside the flex container. Syntaxflex-wrap: nowrap | wrap | wrap-reve 4 min read Which attribute is used to specify an alternate text for an image, if the image is not loaded properly in HTML ? In this article, we will discuss the attribute that is used to specify an alternate text for an image, if an image is not loaded properly in HTML. The <img> alt attribute is used to specify the alternate text for an image. It is useful when the image is not displayed. It is used to give alternative information for an image. Syntax: <img al 1 min read HTML | DOM Textarea wrap Property The DOM Textarea wrap Property is used to set or return the value of the wrap attribute of the textarea. It describes the way the text to be wrapped while submitting a form. Syntax: It is used to return the wrap property.textareaObject.wrapIt is used to set the wrap property.textareaObject.wrap = soft|hard Property Values: soft: It defines that the 2 min read Article Tags :
  • CSS
  • HTML
  • Web Technologies
  • CSS-Misc
  • HTML-Misc
+1 More Like three90RightbarBannerImg Explore More We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy Got It ! Lightbox Improvement Suggest changes Suggest Changes Help us improve. Share your suggestions to enhance the article. Contribute your expertise and make a difference in the GeeksforGeeks portal. geeksforgeeks-suggest-icon Create Improvement Enhance the article with your expertise. Contribute to the GeeksforGeeks community and help create better learning resources for all. geeksforgeeks-improvement-icon Suggest Changes min 4 words, max CharLimit:2000

What kind of Experience do you want to share?

Interview Experiences Admission Experiences Career Journeys Work Experiences Campus Experiences Competitive Exam Experiences

Từ khóa » Html Wrap Text Around Image W3schools