Issue
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
</head>
<body>
<div className="App" style="max-width: 150px; border: 1px solid red;">
<div style="display: flex; flex-wrap: wrap;">
<p style="text-align: left; margin: 0;">
Hello This is a long paragraph
</p>
<button>Go</button>
</div>
</div>
</body>
</html>The paragraph text is dynamic, and if it's small text, the text and the button will be on same row, which is what I want. But when the text is long the flex wrap will push the button on separate row, even if there is a space on the second row to put the button.
So if there's a space on a row to occupy the button, I want to put it on the same line with the text. But if there's no space, it can move to a separate row.
Solution
- Just put
<button>tag inside of<p>tag, or if you text gets change or something apeend<button>tag inside<p>with js.
<p style="text-align: left; margin: 0;">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
software like Aldus PageMaker including versions of Lorem Ipsum.
<button>Go</button>
</p>Answered By - Nexo
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.