3

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;たが、機能していません

4

4 に答える 4

6

max-widthテキスト コンテナのレイアウト要件に従ってを指定する必要があります。見てください：

CSS:

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

HTML:

<p>
ConfigTechnologyHormonyAppComponentBackOfficeLaunch
</p>
于 2016-11-18T06:34:45.080 に答える
5 

.container{
  max-width:100px;
  border:thin black solid;
  word-break:break-all;
  height:auto;
  }
<div class="container">Config TechnologyHormonyApp ComponentBackOfficeLaunch</div>

これを試して。

お役に立てれば。

PS:必要に応じてコンテナ を変更してください。max-width

于 2016-11-18T06:34:25.783 に答える
1

これは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;
于 2016-11-18T06:44:20.350 に答える
1

次のようなことを試してください：

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

于 2016-11-18T06:38:44.567 に答える