splitting lengthy words into several lines

Question

splitting lengthy words into several lines

Does anyone know how to break words like the examples below using CSS or jQuery?

SAMPLE 1

ConfigTechnologyHormonyAppComponentBackOfficeLaunch

It needs to be broken into

ConfigTechnologyHo
rmonyAppComponentB
ackOfficeLaunch

SAMPLE 2

WorkAppComponentBackOfficeLaunchTechnologyNeteseen

It needs to be broken into

WorkAppComponentBa
ckOfficeLaunchTech
nologyNeteseen

SAMPLE 3

Supplement Hormony based on Continous Integration

It needs to be broken into

Supplement Hormony
based on Continous
Integration

I've attempted using word-break: break-all; but it doesn't seem to be working.

jquery html css word-break

Answer 1

Answer №1

To ensure your text container fits within your layout, it is important to set a specific max-width. Check out the example below:

CSS:

p {
  max-width: 100px;
  word-break: break-all;
}

HTML:

<p>
ConfigTechnologyHormonyAppComponentBackOfficeLaunch
</p>

Answer 2

To ensure your text container fits within your layout, it is important to set a specific max-width. Check out the example below:

CSS:

p {
  max-width: 100px;
  word-break: break-all;
}

HTML:

<p>
ConfigTechnologyHormonyAppComponentBackOfficeLaunch
</p>

Answer 3

Answer №2

.container{
  max-width:100px;
  border:thin black solid;
  word-break:break-all;
  height:auto;
  }

<div class="container">Config TechnologyHormonyApp ComponentBackOfficeLaunch</div>

Give this code a try.

Hopefully, you find this information helpful.

PS: Feel free to adjust the max-width value of container based on your specific requirements.

Answer 4

.container{
  max-width:100px;
  border:thin black solid;
  word-break:break-all;
  height:auto;
  }

<div class="container">Config TechnologyHormonyApp ComponentBackOfficeLaunch</div>

Give this code a try.

Hopefully, you find this information helpful.

PS: Feel free to adjust the max-width value of container based on your specific requirements.

Answer 5

Answer №3

Here is a suggested code snippet for you to try:

.product-name a:before {
    content:"CustomizeYourApp \A ndBoostProductivityWith \A pplicationDevelopment ";
    white-space: pre;
    font-size:18px;
}
.product-name a {
    text-indent:-9999px;
    font-size:0;
    text-decoration: none;
}

<h2 class="product-name"> 
  <a></a>
</h2>

Answer 6

Here is a suggested code snippet for you to try:

.product-name a:before {
    content:"CustomizeYourApp \A ndBoostProductivityWith \A pplicationDevelopment ";
    white-space: pre;
    font-size:18px;
}
.product-name a {
    text-indent:-9999px;
    font-size:0;
    text-decoration: none;
}

<h2 class="product-name"> 
  <a></a>
</h2>

Answer 7

Answer №4

You have the ability to achieve this using JavaScript

const longString = 'SoftwareApplicationDevelopmentProgrammingSkills';
const stringArray = longString.split('');
const rowLength = 15;

let formattedText = '';
for(let j=0; j<stringArray.length;j++) {
   formattedText += stringArray[j];
if (j % rowLength == 0 && j>1) {
    formattedText += '</br>';//or \n\r
    }
}
document.getElementById('formatted-text').innerHTML = formattedText;

Answer 8

You have the ability to achieve this using JavaScript

const longString = 'SoftwareApplicationDevelopmentProgrammingSkills';
const stringArray = longString.split('');
const rowLength = 15;

let formattedText = '';
for(let j=0; j<stringArray.length;j++) {
   formattedText += stringArray[j];
if (j % rowLength == 0 && j>1) {
    formattedText += '</br>';//or \n\r
    }
}
document.getElementById('formatted-text').innerHTML = formattedText;

splitting lengthy words into several lines

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Tips for customizing the appearance of an HTML dropdown menu

Utilizing an Ajax spinner for numerous inputs within a single form

Retrieving Data from all Rows in jQuery DataTables

A step-by-step guide on adding a table with colored icons (red, green, and blue) to an HTML page using jQuery

How to utilize Bootstrap 5 flex for aligning text in the center position

Creating your own ListView using the BindingHandler feature in KnockoutJS

Activating an Ajax-filled dropdown when the previous dropdown remains unchanged but a selection has been made

The enigma of HTML forms never ceases to baffle

Is it possible to shift the div inline-block using the CSS :after selector?

Adjusting Text Color on Buttons

Angular: "btn" class vanishes when the button is toggled

Perform an Ajax request to a C# Controller Function

Designing a File Export Functionality in MVC3

Prevent links from being clicked multiple times in Rails using Coffeescript

Executing jQuery function through variable reference

Exploring Symfony2 controller integration with Javascript arguments

Experimenting with a function invoked from a jQuery AJAX callback using Jasmine testing framework

What steps can be taken to ensure the random generator continues to function multiple times?

When the text overflows the boundaries of a paragraph in CSS HTML

The conditional statement for multiplying in JavaScript