Splitting the text vertically by utilizing a single DOM element

Question

Splitting the text vertically by utilizing a single DOM element

I am searching for a way to split my text vertically, with line breaks so that only one word should be present on each line. Currently, I have achieved this by using separate DIV elements for each word. Is it possible to accomplish the same layout using just a single div? You can check out the example on this fiddle. I hope my question is clear. Feel free to make edits to my post if my English needs improvement.

<div>
  <div> s </div>
   <div>u </div> 
  <div> n </div>
</div>

div > div{
  text-align:center
}

html css

Answer 1

Answer №1

A simple CSS trick can achieve this effect.

To make text wrap within a smaller width, use the word-wrap: break-word; property.

Here is a CSS-only solution:

div {
      /* Set width to be less than the font size */
      width: 5px;
      font-size: 20px;
      word-wrap: break-word;
      margin: 0 auto;
    }

<div>
      Hello
    </div>

Answer 2

A simple CSS trick can achieve this effect.

To make text wrap within a smaller width, use the word-wrap: break-word; property.

Here is a CSS-only solution:

div {
      /* Set width to be less than the font size */
      width: 5px;
      font-size: 20px;
      word-wrap: break-word;
      margin: 0 auto;
    }

<div>
      Hello
    </div>

Answer 3

Answer №2

See the example on CodePen

https://codepen.io/example/pen/jj69bq7/

To create line breaks, use the <br> tag.

For text formatting, consider using the <pre> tag for better control over layout.

Answer 4

See the example on CodePen

https://codepen.io/example/pen/jj69bq7/

To create line breaks, use the <br> tag.

For text formatting, consider using the <pre> tag for better control over layout.

Answer 5

Answer №3

To improve the display, consider adjusting the parent div's width to 1px and placing all text within it. For example: <div>sun</div> and define your style class as follows:

<style>div {width: 1px; word-wrap: break-word;} </style>

Apologies for the unconventional formatting, but I hope you understand the concept.

Answer 6

To improve the display, consider adjusting the parent div's width to 1px and placing all text within it. For example: <div>sun</div> and define your style class as follows:

<style>div {width: 1px; word-wrap: break-word;} </style>

Apologies for the unconventional formatting, but I hope you understand the concept.

Splitting the text vertically by utilizing a single DOM element

Answer №1

Answer №2

Answer №3

Similar questions

Dropdown feature in the side navigation bar

How can I access multiple icons using jQuery?

Issue with Braintree drop-in form: Nonce string generation problem

Verify the checkbox for validation is shown exclusively

Learn how to showcase real-time stock information from Yahoo Finance on an Android device. See the JSON format provided below for guidance

Transfer data from button to input field

Eliminating white space - A CSS and HTML page with no room for gaps

Prevent the elongation of HTML select elements in Bootstrap

Is there a way to store image URLs in a fashionable manner?

Accessing PHP variables within the HTML portion of a PHP document

Tips for achieving a gradual transformation of an element according to the scrolling position

Dynamic presentation created with Serif software

Exploring WordPress's Query Page with Posts

Using jQuery, you can easily update the value of the nth-child(n) for a cloned element

The flex-wrap property with a value of "nowrap" does not seem to

Receiving the result as well as encountering undefined initially during AJAX request

Developing a quiz using jQuery to load and save quiz options

During the process of converting documents to HTML, any graphics or shapes may not be accurately translated into HTML format

JavaScript layout: Thymealf

Utilizing CSS to Display a Variety of Colors within a Text String