Activating text wrapping functionality

Question

Activating text wrapping functionality

My current project involves converting HTML to PDF using jsPDF. In order to ensure that every word appears in the exact location as it does in the original HTML, I decided to wrap each word in <span> tags. Specifically, I have a font tag (not added by my code) that contains several nested span elements:

<font><span>Hello</span>&nbsp;<span>wrap</span>&nbsp;<span>....</font>

Despite these efforts, after implementing this strategy, I noticed that it seems to disrupt the default word wrapping behavior, as demonstrated here.

I am seeking advice on how to rectify this issue and restore the desired word wrapping functionality. Can anyone provide guidance on how to achieve this?

javascript css word-wrap

Answer 1

Answer №1

The reason for this behavior is due to the default display being set to inline. However, if you change it to inline-block, it will wrap as expected:

Take a look at this example on jsfiddle

To achieve this, simply adjust the CSS like so:

span
{
    display:inline-block;    
}

If desired, you can create a new class (e.g. wordWrapSpan) rather than altering the default behavior of span.

Answer 2

The reason for this behavior is due to the default display being set to inline. However, if you change it to inline-block, it will wrap as expected:

Take a look at this example on jsfiddle

To achieve this, simply adjust the CSS like so:

span
{
    display:inline-block;    
}

If desired, you can create a new class (e.g. wordWrapSpan) rather than altering the default behavior of span.

Answer 3

Answer №2

Another option available is:

Add this style for word wrapping: word-wrap: break-word;

.text{
    word-wrap: break-word;
}

Take a look at this example on Fiddle

Answer 4

Another option available is:

Add this style for word wrapping: word-wrap: break-word;

.text{
    word-wrap: break-word;
}

Take a look at this example on Fiddle

Activating text wrapping functionality

Answer №1

Answer №2

Similar questions

Checking for any lint errors in all JavaScript files within the project package using JSHint

Await the reply from Angular while using Selenium WebDriver

How can I use ngx-editor to insert an HTML block at the current cursor position by clicking a button?

`Using top-level await in a module can interfere with the firing of the `onload` event

Is there a way to verify if an array has been initialized and holds a value simultaneously?

A fresh PHP page escapes from the confines of an iframe and expands to occupy the entire

Leveraging AngularJS to fetch data from two distinct JSON files

The animation function occasionally halts unexpectedly at a varying position

The Vue v-model-bound HTML element is unable to update the Vue instance when a different JavaScript entity binds to it and modifies the data

What is the best way to retrieve JSON key/value pairs instead of an array?

Using Ajax.Updater to run JavaScript code

How can I navigate to an anchor using hover?

The jQuery validation applied to the data submission per post is not functioning as expected as the $_POST variable is appearing empty

Transforming varied JavaScript objects into a serial form

Generate checkboxes by utilizing the JSON data

Issue with flexbox max-width property not being applied when resizing the page width

Is `console.log()` considered a native function in JavaScript?

Modify/Adjust/Move the image uploaded by the user in VueJS before transferring it to an aws s3 bucket

The spinner persists even after the fetch api call

On page load, refresh the content of the div based on the selected radio button values