将长词分成多行

时间:2016-11-18 06:30:29

标签: jquery html css word-break

任何人都可以告诉我一些破解单词的解决方案,如下图所示,使用css或jquery。

样本1

ConfigTechnologyHormonyAppComponentBackOfficeLaunch

需要将其分解为

ConfigTechnologyHo
rmonyAppComponentB
ackOfficeLaunch

SAMPLE 2

WorkAppComponentBackOfficeLaunchTechnologyNeteseen

需要将其分解为

WorkAppComponentBa
ckOfficeLaunchTech
nologyNeteseen

SAMPLE 3

Supplement Hormony based on Continous Integration

需要将其分解为

Supplement Hormony
based on Continous
Integration

我尝试使用word-break: break-all;,但它无效

4 个答案:

答案 0 :(得分:4)

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

试试这个。

希望这有帮助。

PS:根据您的需要更改容器 max-width

答案 1 :(得分:4)

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

CSS:

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

HTML:

<p>
ConfigTechnologyHormonyAppComponentBackOfficeLaunch
</p>

答案 2 :(得分: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>

答案 3 :(得分:1)

您可以使用javascript

执行此操作
Auction.AuctionNotiNewInv.isDisplayed().then(function(){
        Auction.NotificationTitle.get(0).isDisplayed().then(function(){
            Auction.NotificationTitle.count().then(function(Count){
                console.log(Count);
                var NotifTitleCount = Count;
                for(var i=0; i < NotifTitleCount; i++) {
                    Auction.NotificationTitle.get(i).isDisplayed().then(function(){
                        Auction.NotifAuctioneer.isDisplayed().then(function(IsDisplayed){
                        if(IsDisplayed)
                            Auction.NotificationTitle.get(i).click();
                         else
                            console.log('New Auction invitation is not displayed.');

                        });
                    });
                }
            });
        });
    });