我正试图破解但是当我使用此代码时
word-wrap: break-word;
-ms-word-wrap: break-word;
-webkit-word-wrap: break-word;
word-break: break-all;
-ms-word-break: break-all;
-webkit-word-break: break-all;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
它打破了所有单词，但我只需要打破很长的单词，其他单词会分成两行，为了更多的解释，我确定小提琴链接。
结果仍然存在
STATIONERY BU
NDLES
但我需要
文具
BUNDLES
链接如下 https://jsfiddle.net/Alvee/Ljuzrjp4/
由于
答案 0 :(得分：0)
删除
就足够了 word-break: break-all;
-ms-word-break: break-all;
-webkit-word-break: break-all;
部分。根据{{3}}，word-break: break-all表示任意两个字母之间的行可能会断开，这正是您要避免的。
答案 1 :(得分：0)
我通过改变一点点设计来解决问题
<div class="centralize">
<div class="flexIcon">
<img src="images/services/web-development.png" />
</div>
<span>Development</span>
</div>
.centralize {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
答案 2 :(得分：0)
您可以添加隐藏范围来计算范围文本的宽度并调整字体大小。
以下是JSFiddle
var hiddenSpan = $("#calculatewidth");
$(".flex-item").each(function(i) {
var divWidth = $(this).find("span").width();
var text = $(this).find("span");
hiddenSpan.text(text.text());
var actualWidth = hiddenSpan.width();
if(actualWidth > text.width())
{
var textVal = text.text();
var i = textVal.lastIndexOf(" ");
var firstText = '';
if(i > 0){
firstText = textVal.substring(0,i);
}else{
firstText = text.text();
}
var lastText = textVal.substring(i+1);
var fontSize = 25;
hiddenSpan.text(firstText);
hiddenSpan.css("font-size",fontSize);
while(hiddenSpan.width() > divWidth){
fontSize -= 1;
hiddenSpan.css("font-size",fontSize);
}
text.css("font-size",fontSize);
if(i>0){
text.html(textVal.substring(0,i) + "<br/>" + textVal.substring(i+1));
}
}
});.sectionServices{color:white}.sectionServices .container .row{display:flex;flex-wrap:wrap}.sectionServices .container .row>div{margin-left:0 !important;margin-bottom:20px;display:flex;flex-wrap:wrap}.sectionServices .flex-item{width:100%;position:relative;padding:30px 20px 70px;background-color:#2b2b2b}.sectionServices .flex-item .flexIcon{float:left;width:120px;height:90px;background:no-repeat center center}.sectionServices .flex-item .flexIcon.logo-design{background-image:url("../images/services/logo-design.png")}.sectionServices .flex-item .flexIcon.web-development{background-image:url("../images/services/web-development.png")}.sectionServices .flex-item .flexIcon.print-media{background-image:url("../images/services/print-media.png")}.sectionServices .flex-item span{word-wrap:break-word;-ms-word-wrap:break-word;-webkit-word-wrap:break-word;word-break:break-all;-ms-word-break:break-all;-webkit-word-break:break-all;-webkit-hyphens:auto;-moz-hyphens:auto;hyphens:auto;float:left;display:flex;align-items:center;font-size:25px;font-weight:500;text-transform:uppercase;width:calc(100% - 120px);height:90px}.sectionServices .flex-item p{font-size:14px;text-align:center}.sectionServices .flex-item a{background:transparent none repeat scroll 0 0;border:1px solid white;box-shadow:none;position:absolute;bottom:20px;left:calc(50% - 75px)}.sectionServices .flex-item:hover{background-color:#47aa42}.sectionServices .flex-item:hover a{box-shadow:none;color:#2b2b2b;background-color:white}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sectionServices">
<div class="container">
<div class="row">
<div class="col xs12 m6 l4">
<div class="flex-item">
<div class="flexIcon" style="background-image: url('http://localhost/parks/themes/recycle/images/services/business-cards.png');">
</div>
<span>Business Cards</span>
<div class="clear"></div>
<p>Our ultimate aim is to identify the most effective and engaging way to bring products, services and core brand objectives into alignment...</p>
<a href="http://localhost/parks/business-cards" class="waves-effect waves-light btn work">
View Work
</a>
</div>
</div>
<div class="col xs12 m6 l4">
<div class="flex-item">
<div class="flexIcon" style="background-image: url('http://localhost/parks/themes/recycle/images/services/compliment-slips.png');">
</div>
<span>compliment slips</span>
<div class="clear"></div>
<p>The standard method of printing the typical standard sized comp slip is to lay 3 or 6 up on the press...</p>
<a href="http://localhost/parks/compliment-slips" class="waves-effect waves-light btn work">
View Work
</a>
</div>
</div>
<div class="col xs12 m6 l4">
<div class="flex-item">
<div class="flexIcon" style="background-image: url('http://localhost/parks/themes/recycle/images/services/flyers-leaflets.png');">
</div>
<span>flyers & leaflets</span>
<div class="clear"></div>
<p>Whether you need 1m one colour leaflets or a special die-cut shaped flyer printed on glossy board and sealed with gloss UV...</p>
<a href="http://localhost/parks/flyers-leaflets" class="waves-effect waves-light btn work">
View Work
</a>
</div>
</div>
<div class="col xs12 m6 l4">
<div class="flex-item">
<div class="flexIcon" style="background-image: url('http://localhost/parks/themes/recycle/images/services/folders.png');">
</div>
<span>folders</span>
<div class="clear"></div>
<p>We have a reputation for producing high quality folders, either bespoke or ‘standard’ shapes, sizes and designs...</p>
<a href="http://localhost/parks/folders" class="waves-effect waves-light btn work">
View Work
</a>
</div>
</div>
<div class="col xs12 m6 l4">
<div class="flex-item">
<div class="flexIcon" style="background-image: url('http://localhost/parks/themes/recycle/images/services/letterheads.png');">
</div>
<span>Letterheads</span>
<div class="clear"></div>
<p>Many clients opt for expensive branded (and often watermarked) paper for their letterheads. Like most Supermarkets, all paper mills and...</p>
<a href="http://localhost/parks/letterheads" class="waves-effect waves-light btn work">
View Work
</a>
</div>
</div>
<div class="col xs12 m6 l4">
<div class="flex-item">
<div class="flexIcon" style="background-image: url('http://localhost/parks/themes/recycle/images/services/posters.png');">
</div>
<span>Posters</span>
<div class="clear"></div>
<p>The standard method of printing the typical standard sized comp slip is to lay 3 or 6 up on the press...</p>
<a href="http://localhost/parks/posters" class="waves-effect waves-light btn work">
View Work
</a>
</div>
</div>
<div class="col xs12 m6 l4">
<div class="flex-item">
<div class="flexIcon" style="background-image: url('http://localhost/parks/themes/recycle/images/services/stationery-bundles.png');">
</div>
<span>Stationery Bundles</span>
<div class="clear"></div>
<p>We’ll do everything we can to make keep your print bill as low as possible, and that can include ‘stationery bundles’...</p>
<a href="http://localhost/parks/stationery-bundles" class="waves-effect waves-light btn work">
View Work
</a>
</div>
</div>
</div>
</div>
</div>
<span id="calculatewidth" style="font-size:25px;font-weight:500;text-transform: uppercase;display:none;"></span>