是否可以<a>在多行中</a>显示<a>标签文本</a>

Question

我有一个标签，该标签中的文本将来自数据库。 现在可以在多行中显示标签文本吗？ 例如：我想每行只显示10个字符。 如果动态文本包含29个字符，则它应显示为三行，如果动态文本仅包含9个字符，则它应显示在一行中。

例如：

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

对于上面的代码，我需要输出，如，

Welcome to
 w3schools
 site

有关显示输出的建议如上所示？

Answer 1

试试这个

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

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

小提琴

要么

链接

Answer 2

您可以使用split从字符串中生成数组，并forEach()在每个第10个元素后插入<br>

 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> 

Answer 3

您可以使用ch的宽度值来近似此值

一个'ch`近似于0字符字形的宽度，因此文本空间与字体大小成比例。

 * { 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> 

Answer 4

使用split()获取文本内容中的每个单词。 然后检查是否字小于10的长度将其插入a ，如果单词的长度大于10插入大<br/>成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> 

Answer 5

这不是很漂亮，但这就是我做的方式：

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/

Answer 6

首先计算字符数，然后在10个字符的末尾添加<br />标记。