Enclose every line within a span tag

Question

Enclose every line within a span tag

I'm currently exploring ways to wrap each line of content in a span. For example, suppose I have an element structured like this:

.body-copy {
  position: relative;
  width: 100%;
  height: auto
}

<div class="body-copy">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est labour.
</div>

In order for the text to span the width of its container, I am seeking a way to enclose each line of content in a span upon document load, window load, and window resize. I wonder if this is even feasible? Your valuable suggestions on this matter would be highly appreciated!

javascript jquery html css

Answer 1

Answer №1

If you're looking for a messy yet effective method to achieve your goal, here's an approach you can try. This method involves using a hidden div to compare the width with the original text as we gradually add words one by one. Once the width limit is reached, a new span element is created to hold the collected words. This process is repeated until all words are grouped into their respective span elements. The remaining words are then placed in their own span, and the original text is replaced with the updated HTML code. You can trigger the wordWrap() function whenever the document is loaded or the window is resized. To make it easier to visualize where the markup is applied, borders have been added to the span elements.

$(document).ready(function() {
  wordWrap();
});

function wordWrap() {
  var bdy = $(".body-copy");
  var text = $(bdy).text();
  var html = $(bdy).html();
  var bWidth = $(bdy).width();
  var words = text.split(" ");
  var span = "";
  var word = "";
  var allSpans = "";
  var lastWord = "";
  $(words).each(function(i, w) {
    if (lastWord != "") {
      w = lastWord + " "+ w ;
      lastWord = "";
    };
    word = w + " ";
    span = span + word;
    $(".body-copy-two").append(word);
    if ($(".body-copy-two").width() >= bWidth) {
      var wLen = word.length;
      span = span.slice(0, -wLen);
      lastWord = w + " ";
      allSpans = allSpans + "<span>" + $.trim(span) + "</span>";
      $(".body-copy-two").html("");
      span = "";
      word = "";
    }
  });
  var lastSpan = "<span>" + $(".body-copy-two").text() + "</span>";
  $(bdy).html(allSpans + lastSpan);
}

.body-copy {
  position: relative;
  width: 100%;
  height: auto
}

.body-copy-two {
  position: absolute;
  visibility: hidden;
}

.body-copy span {
  border: 1px solid black;
  display:block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="body-copy">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est labour.
</div>
<div class="body-copy-two"></div>

Answer 2

If you're looking for a messy yet effective method to achieve your goal, here's an approach you can try. This method involves using a hidden div to compare the width with the original text as we gradually add words one by one. Once the width limit is reached, a new span element is created to hold the collected words. This process is repeated until all words are grouped into their respective span elements. The remaining words are then placed in their own span, and the original text is replaced with the updated HTML code. You can trigger the wordWrap() function whenever the document is loaded or the window is resized. To make it easier to visualize where the markup is applied, borders have been added to the span elements.

$(document).ready(function() {
  wordWrap();
});

function wordWrap() {
  var bdy = $(".body-copy");
  var text = $(bdy).text();
  var html = $(bdy).html();
  var bWidth = $(bdy).width();
  var words = text.split(" ");
  var span = "";
  var word = "";
  var allSpans = "";
  var lastWord = "";
  $(words).each(function(i, w) {
    if (lastWord != "") {
      w = lastWord + " "+ w ;
      lastWord = "";
    };
    word = w + " ";
    span = span + word;
    $(".body-copy-two").append(word);
    if ($(".body-copy-two").width() >= bWidth) {
      var wLen = word.length;
      span = span.slice(0, -wLen);
      lastWord = w + " ";
      allSpans = allSpans + "<span>" + $.trim(span) + "</span>";
      $(".body-copy-two").html("");
      span = "";
      word = "";
    }
  });
  var lastSpan = "<span>" + $(".body-copy-two").text() + "</span>";
  $(bdy).html(allSpans + lastSpan);
}

.body-copy {
  position: relative;
  width: 100%;
  height: auto
}

.body-copy-two {
  position: absolute;
  visibility: hidden;
}

.body-copy span {
  border: 1px solid black;
  display:block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="body-copy">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est labour.
</div>
<div class="body-copy-two"></div>

Enclose every line within a span tag

Answer №1

Similar questions

Having difficulty maintaining trailing zeroes in decimals after converting to float in Angular

What is the correct way to assign a property to a function's scope?

Exploring the power of directives in AngularJS for dynamically manipulating the

Transmit information to Flask server using an AJAX POST call

The console does not display the JSON data for requests and responses

Verify the content of each file in a bulk upload before transferring them to the server

Show custom exception messages for jQuery Ajax error handling

Transforming HTML produced by an outdated ASP system to generate modern ASP.NET 2.0 web pages

Tips for effectively utilizing foreach loops in JQuery

I am currently using jQuery autocomplete in an attempt to display the value in the textbox as a table. The data is not being retrieved from a JSON source using Ajax directly in the text

Customizable initiation time for the JQuery Countdown timer

Having trouble with Electron nodeIntegration functionality and experiencing some odd behavior in general with Electron

Tips for creating brief animations

Prevent jQuery UI default styling from being applied

Markdown in Vue.js filters

What is the best way to display a multi-state component that includes an API fetch?

At what point is the JavaScript function expression triggered in this code snippet?

Using a PHP variable as the input for the img src attribute in HTML

Choosing a BeautifulSoup tag according to attribute value

Is there a way to retrieve two separate route details using jQuery simultaneously?