---
title: "How to manipulate SVG foreign object html text wrapping and positioning?"  
description: "How to manipulate SVG foreign object html text wrapping and positioning?"  
author: "Utpal Vishwas"  
published: 2023-04-25  
updated: 2023-04-26  
canonical: https://www.mindstick.com/forum/158011/how-to-manipulate-svg-foreign-object-html-text-wrapping-and-positioning  
category: "html"  
tags: ["html", "css", "css position"]  
reading_time: 2 minutes  

---

# How to manipulate SVG foreign object html text wrapping and positioning?

How to manipulate [SVG](https://www.mindstick.com/forum/159187/create-svg-progress-bar-to-move-anti-clockwise-using-css) [foreign](https://yourviews.mindstick.com/story/2164/here-are-the-best-foreign-universities-for-higher-education) object [html](https://www.mindstick.com/articles/1530/design-a-simple-stylish-calculator-using-html-css-and-javascript) [text](https://www.mindstick.com/blog/301635/did-people-reinvent-texting-to-express-the-full-range-of-emotions) [wrapping](https://www.mindstick.com/interview/399/q-why-should-i-bother-wrapping-items-in-a-comboboxitem) and positioning?

## Replies

### Reply by Aryan Kumar

When embedding HTML content inside an SVG foreign object, the text wrapping and positioning can be manipulated using CSS. Here are some tips for manipulating the text wrapping and positioning:

1. **Text Wrapping:** To control text wrapping in an SVG foreign object, you can use the CSS **word-wrap** property. By default, the **word-wrap** property is set to **normal**, which means that long words will overflow the container. To enable text wrapping, you can set the **word-wrap** property to **break-word**.
2. **Text Positioning:** To position the text inside an SVG foreign object, you can use the CSS **position** property. By default, the **position** property is set to **static**, which means that the element is positioned according to the normal flow of the document. To position the text relative to its container, you can set the **position** property to **relative**. You can then use the **top**, **bottom**, **left**, and **right** properties to position the text within the container.

Here is an example of how to use CSS to control text wrapping and positioning in an SVG foreign object:

```html
<svg width="500" height="500">
 <foreignObject x="10" y="10" width="400" height="200">
   <div style="word-wrap: break-word; position: relative; top: 50%; transform: translateY(-50%);">
     This is some long text that will wrap inside the SVG foreign object.
   </div>
 </foreignObject>
</svg>
```

In this example, the **word-wrap** property is set to **break-word** to enable text wrapping. The **position** property is set to **relative** to position the text relative to its container. The **top** property is set to **50%** to move the text down by 50% of the container's height. Finally, the **transform** property is used to vertically center the text by moving it up by 50% of its own height.

\


---

Original Source: https://www.mindstick.com/forum/158011/how-to-manipulate-svg-foreign-object-html-text-wrapping-and-positioning

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.