能否在多行中显示<a>标签的文本？

Question

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

例如：

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

对于上述代码，我需要输出如下结果：

Welcome to
 w3schools
 site

有什么建议可以像上面显示输出吗？

- Vinod

---

这是动态文本，不知道会有什么文本出现在该标签中。 - Vinod

使用CSS的min-width和min-height - hmd

更新后的代码如下：https://jsfiddle.net/hr6hq7uj/1/ - Sunil Gehlot

Answer 1

试试这个

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

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

js fiddle

或者

链接

- SAUMYA

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>

- Nenad Vracar

---

我需要把那个脚本放在document.ready()里吗？这个解决方案也支持for循环吗？ - Prasad

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>

- Paulie_D

Answer 4

使用 split() 方法获取文本内容中的每个单词。然后检查单词长度是否小于 10，如果是，则将其插入到 a 中；如果单词长度大于 10，则将 <br/> 插入到 a 中。保留 HTML 标签。

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>

- Mohammad

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/

- zoubida13

---

当您的代码长度大于10时，它会打破单词。请参见https://jsfiddle.net/ng6ey9zL/1/。 - Mohammad

@Mohammad 是的，它是按字符而不是按单词分割的，但如果一个单词超过10个字符怎么办？我只是按照原始需求来实现，没有更多的改动。 - zoubida13

Answer 6

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

- Dinanath Parit