將長單詞分成多行

任何人都可以請告訴我一些解決方案，使用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;但它不能正常工作

來源

2016-11-18 Alex Man

給容器或元素的'MAX-width' –

提供code..so我們可以幫助你。你有什麼嘗試？ –

來自w3schools的相同演示：http://www.w3schools.com/cssref/css3_pr_word-wrap.asp –

根據您對文本容器的佈局要求，您需要指定max-width。看一看：

CSS：

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

HTML：

<p> 
ConfigTechnologyHormonyAppComponentBackOfficeLaunch 
</p>

來源

2016-11-18 06:34:45

有沒有什麼方法可以在不提供'max-width'的情況下做休息時間 –

'word-break'與有界容器一起工作。如果你可以清楚地指出你想要達到的目標，也許可能有另一種方法。從語義上講，這是正確的做法。 –

.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-18 06:34:25

有沒有什麼辦法可以在不提供最大寬度的情況下進行休息 –

@AlexMan是使用寬度:)） – madalinivascu

@madalinivascu ...與您同意.. @Alex Man您也可以使用'width'。因爲TânNguyễn給了你'w3schools'的例子。在那裏，他們已經使用'width'。 –

嘗試是這樣的：

.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-18 06:38:44

爲此，您可以使用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-18 06:44:20 madalinivascu

將長單詞分成多行

回答

相關問題