Add hyphens to separate the words in AngularJS if there is a break in the string

Question

Add hyphens to separate the words in AngularJS if there is a break in the string

Within a div of set width, a string is being bound to it. This string could be short or long.

I would like for the string to break with a hyphen inserted on each line except for the last one.

For example: If the string is "misconception" and it breaks at misc, it should look like this ->

misc-
once-
ptio-
n

instead of this ->

misc
once
ptio
n

Please note: I have attempted using the following CSS:

    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;

However, the issue lies in the fact that hyphens only work with dictionary words. In my scenario, the string can vary from anything such as names to random strings, hence hyphens are not effective in my case.

You can view the demo here.

javascript jquery html css angularjs

Answer 1

Answer №1

By utilizing scripting within AngularJS, I successfully tackled the issue mentioned above without the need for any CSS.

Check out the code snippet below:

JavaScript:

  $scope.data = "Loremipsumdolorsitametexeamdictasmeliuslaboramus Duoadverearinteresset";
  var text = $scope.data;
  var array = text.split('');
  len = 18;

  var newtext = '';
  for (var i = 0; i < array.length; i++) {
    newtext += array[i];
    if (i % len == 0 && i > 1) {
      newtext += '-</br>';
    }
  }
  document.getElementById('text').innerHTML = newtext;

HTML:

<div class="test" id="text"></div>

Take a look at the live demo here

Answer 2

By utilizing scripting within AngularJS, I successfully tackled the issue mentioned above without the need for any CSS.

Check out the code snippet below:

JavaScript:

  $scope.data = "Loremipsumdolorsitametexeamdictasmeliuslaboramus Duoadverearinteresset";
  var text = $scope.data;
  var array = text.split('');
  len = 18;

  var newtext = '';
  for (var i = 0; i < array.length; i++) {
    newtext += array[i];
    if (i % len == 0 && i > 1) {
      newtext += '-</br>';
    }
  }
  document.getElementById('text').innerHTML = newtext;

HTML:

<div class="test" id="text"></div>

Take a look at the live demo here

Add hyphens to separate the words in AngularJS if there is a break in the string

Answer №1

Similar questions

Issues with CreateJS chained animations failing to reach their intended target positions

I am experiencing an issue where the tooltip does not appear when I click the icon. What adjustments can be made to the code to ensure that the tooltip

Function returning undefined when accessing prototype property in JavaScript

Encountering a 304 status error in the HTTP GET response after deploying a React app on Netlify

Altering the properties of every item within a v-for loop's array

Fancybox 2 - CSS styles vanish when using Ajax request

Issue: Proper handling of data serialization from getStaticProps in Next.js

What is the correct way to iterate through a list of images fetched with getStaticProps and display them within the same component?

Launching the node application using `node` as the starting command is successful, however, using `/usr/bin/node` as the starting

What is the best method to transfer information between main.js and a specific directory?

How can I adjust a number using a shifter in JavaScript?

Add a delay in jQuery so that when triggered by a click, the element fades out smoothly or instantaneously

How to retrieve the index upon clicking in Javascript

transfer information between different express middleware functions within a universal react application

Displaying a component in a router view based on specific conditions

Exploration of the "display: none;" property and loading of content

Using the html5-canvas element to drag connected lines

The request for JSON parsing encountered a failed attempt, resulting in an error while trying to parse the JSON

I am encountering an issue where I am sending an AJAX request to a PHP file with the datatype set as JSONP, but I

Javascript - Incorporate a hyperlink into my Flickr Api image query