I have one tag where the text in to that tag will e 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="">Wele to w3schools site</a>

For the above code I need output like,

Wele to
 w3schools
 site

Any suggestions to display output as shown above?

I have one tag where the text in to that tag will e 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.">Wele to w3schools site</a>

For the above code I need output like,

Wele to
 w3schools
 site

Any suggestions to display output as shown above?

• javascript
• html
• css

• That is dynamic text don't know what text will e into that tag. – Vinod Commented May 19, 2016 at 9:15
• 1 Use css min-width and min-height – hmd Commented May 19, 2016 at 9:16
• 2 Updated Like this : jsfiddle/hr6hq7uj/1 – Sunil Gehlot Commented May 19, 2016 at 9:18

6 Answers 6

try this

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

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

js fiddle

OR

link

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.">Wele to w3schools site</a>

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.">Wele to w3schools site</a>

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


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

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="#">Wele to w3schools site</a>

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/ng6ey9zL/

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