Can it possible to display the tag text in multiple lines

Question

I have one tag where the text in to that tag will come dynamically from database. Now can it possible to display the tag text in multiple lines? Ex: I want to display only 10 characters per line. If the dynamic text contain 29 characters then it should display in three lines, If the dynamic text contain only 9 characters then it should display in a single line.

Ex:

<a href="http://www.w3schools.com">Welcome to w3schools site</a>

For the above code I need output like,

Welcome to
 w3schools
 site

Any suggestions to display output as shown above?

That is dynamic text don't know what text will come into that tag. — Vinod, May 19 '16 at 09:15

score 3 · Answer 1 · edited May 23 '17 at 12:02

3

try this

var str = "aaaaaaaaaaaaaaaaaaaaaaaaa" ;
var htmlfoo = str.match(/.{1,10}/g).join("<br/>");

$('div').html(htmlfoo);

js fiddle

OR

link

edited May 23 '17 at 12:02

Community

1
1

answered May 19 '16 at 09:23

SAUMYA

1,508
1
13
20

score 1 · Answer 2 · answered May 19 '16 at 09:27

1

You can use split to make array from your string and forEach() to insert <br> after every 10th element

var a = document.querySelector('a');
var str = a.innerHTML.split('');
str.forEach((e, i) => {
  if(i % 11 == 0 && i != 0) str.splice(i, 0, "<br>");
})

a.innerHTML = str.join('');

<a href="http://www.w3schools.com">Welcome to w3schools site</a>

answered May 19 '16 at 09:27

Nenad Vracar

118,580
15
151
176

Do I need to place that script in document.ready()? Will this solution support in for loop also? – Prasad May 19 '16 at 09:33

score 1 · Answer 3 · answered May 19 '16 at 09:33

You can approximimate this with the width value in ch

One 'ch` approximates with the width of 0 character glyph so the text space is proportional to the font size.

* {
  margin: 0;
  padding: 0;
}
.ch10 {
  display: block;
  width: 10ch;
  word-break: break-all;
  margin: 1em;
}

<a class="ch10" href="http://www.w3schools.com">Welcome to w3schools site</a>

<h1><a class="ch10" href="http://www.w3schools.com">0123456789</a></h1>


<a class="ch10" href="http://www.w3schools.com">012345678910</a>

Mohammad · Answer 4 · 2016-05-19T10:04:30.287

Use split() to get every word in text content. Then check if length of word less than 10 insert it into a and if length of word is great than 10 insert <br/> into a.

var aElement = document.querySelector('a');
var words = aElement.innerHTML.split(" ");

var newText = "";
for(var i = 0; i < words.length; i++){
    var textLength = newText.length + words[i].length;
    if (textLength > 10)
        newText += "<br/>";
    
    newText += " " + words[i];
}

aElement.innerHTML = newText;

<a href="#">Welcome to w3schools site</a>

score 0 · Answer 5 · answered May 19 '16 at 09:39

0

It's not very pretty but this is how I did it :

HTML

<a id="test" href="#">some text that is quite long</a>

JavaScript

$(document).ready(function(){
  var longtext = $('a#test').text();
  var chars = longtext.split("");
  var newtext = "";
  var charcount = 0;
  if (chars.length > 9)
  {


    for(var i = 0; i < chars.length; i++)
    {

         if (charcount > 9)
         {
              newtext += " <br> ";
              charcount = 0;
         }
         newtext += chars[i];
         ++charcount;
    }
    $('a#test').html(newtext);
  }
});

JSFiddle

https://jsfiddle.net/ng6ey9zL/

answered May 19 '16 at 09:39

zoubida13

1,738
12
20

Your code break words when it length is grate than 10. See https://jsfiddle.net/ng6ey9zL/1/ – Mohammad May 19 '16 at 09:50
@Mohammad yes it breaks by char not by word, but what if a word is longer than 10chars? I just applied the original requirements of OP, nothing more. – zoubida13 May 19 '16 at 09:52

score -1 · Answer 6 · edited May 19 '16 at 15:35

-1

First count the characters, then add <br /> tag at end of 10 characters.

edited May 19 '16 at 15:35

Hatchet

5,320
1
30
42

answered May 19 '16 at 09:24

Dinanath Parit

165
3
4

Can it possible to display the tag text in multiple lines

6 Answers6