[英]break long word into multiple lines
谁能告诉我一些解决方法,如下所示使用css或jquery来打断单词。
样本1
ConfigTechnologyHormonyAppComponentBackOfficeLaunch
需要分解成
ConfigTechnologyHo
rmonyAppComponentB
ackOfficeLaunch
样本2
WorkAppComponentBackOfficeLaunchTechnologyNeteseen
需要分解成
WorkAppComponentBa
ckOfficeLaunchTech
nologyNeteseen
样本3
Supplement Hormony based on Continous Integration
需要分解成
Supplement Hormony
based on Continous
Integration
我尝试过word-break: break-all;
但它不起作用
.container{ max-width:100px; border:thin black solid; word-break:break-all; height:auto; }
<div class="container">Config TechnologyHormonyApp ComponentBackOfficeLaunch</div>
尝试这个。
希望这可以帮助。
PS:根据您的需要更改容器的 max-width
。
您需要根据文本容器的布局要求指定max-width
。 看一看:
CSS:
p {
max-width: 100px;
word-break: break-all;
}
HTML:
<p>
ConfigTechnologyHormonyAppComponentBackOfficeLaunch
</p>
尝试这样的事情:
.product-name a:before { content:"ConfigTechnologyHo \\A rmonyAppComponentB \\A ackOfficeLaunch "; white-space: pre; font-size:18px; } .product-name a { text-indent:-9999px; font-size:0; text-decoration: none; }
<h2 class="product-name"> <a></a> </h2>
您可以使用javascript执行此操作
var text = 'WorkAppComponentBackOfficeLaunchTechnologyNeteseen';
var array = text.split('');
len = 18;//length of a single row
var newtext = '';
for(var i=0;i<array.length;i++) {
newtext +=array[i];
if (i % len == 0 && i>1) {
newtext += '</br>';//or \n\r
}
}
document.getElementById('text').innerHTML = newtext;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.