将长单词分成多行

Question

任何人都可以告诉我一些打破单词的解决方案，如下所示使用 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; 但它不起作用

Answer 1

.container{
  max-width:100px;
  border:thin black solid;
  word-break:break-all;
  height:auto;
  }

<div class="container">Config TechnologyHormonyApp ComponentBackOfficeLaunch</div>

试试这个。

希望对您有所帮助。

PS: 根据需要更改 container max-width。

Answer 2

您需要根据您对文本容器的布局要求指定一个max-width。看看：

CSS:

p {
  max-width: 100px;
  word-break: break-all;
}

HTML:

<p>
ConfigTechnologyHormonyAppComponentBackOfficeLaunch
</p>

Answer 3

试试这样：

.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>

Answer 4

您可以使用 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;

将长单词分成多行

break long word into multiple lines

html

css

jquery

word-break