如何打破长字到新的生产线在inline-block的DIV

第一和第三个例子是正确的设计，但我不能想出一个办法，使长字在例2中正确地打破这个词。有没有办法只使用CSS来做到这一点？

更新：我试过使用word break，但它不能在IE 10上工作）。另外值得一提的是，在第三个例子中应该保持原样。

.container { 
 
    position: absolute; 
 
    overflow: hidden; 
 
    width: 200px; 
 
    height: 100px; 
 
    border: 2px solid rgb(64, 72, 75); 
 
    background-color: rgba(64, 72, 75, 0.14902); 
 
} 
 

 
.name { 
 
    color: rgb(255, 255, 255); 
 
    background-color: rgb(64, 72, 75); 
 
    padding: 0px 7px; 
 
    word-wrap: break-word; 
 
    display: inline-block 
 
}

<div class="container"> 
 
    <div class="name">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div> 
 
</div> 
 
<div class="container" style="top: 150px"> 
 
    <div class="name">Lorem ipsum dolor sit amet aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div> 
 
</div> 
 
<div class="container" style="top: 300px"> 
 
    <div class="name">a</div> 
 
</div>

来源

2017-02-10 thinhng

添加显示：块;在您的.name类中 –

是将显示属性从内嵌块更改为阻止解决您的问题。 –

你有2个选择这个机会： - 1）word-break：breal all; 2）display：inline-block;显示：block; 你可以选择任何一个。 –

你必须设置最大宽度您内嵌块元素。

.container { 
 
    position: absolute; 
 
    overflow: hidden; 
 
    width: 200px; 
 
    height: 100px; 
 
    border: 2px solid rgb(64, 72, 75); 
 
    background-color: rgba(64, 72, 75, 0.14902); 
 
} 
 

 
.name { 
 
    color: rgb(255, 255, 255); 
 
    background-color: rgb(64, 72, 75); 
 
    padding: 0px 7px; 
 
    word-wrap: break-word; 
 
    display:inline-block; 
 
    max-width: calc(100% - 14px); // 100% - padding 
 
}

<div class="container"> 
 
    <div class="name">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div> 
 
</div> 
 
<div class="container" style="top: 150px"> 
 
    <div class="name">Lorem ipsum dolor sit amet aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaae</div> 
 
</div> 
 
<div class="container" style="top: 300px"> 
 
    <div class="name">a</div> 
 
</div>

来源

2017-02-10 09:14:45

但是在第三个例子中，黑暗区域必须在文本结束的地方结束，这样第三个例子是错误的 – thinhng

非常感谢：D – thinhng

您可以删除display:inline-block;并添加你可以display:block;

.container { 
 
    position: absolute; 
 
    overflow: hidden; 
 
    width: 200px; 
 
    height: 100px; 
 
    border: 2px solid rgb(64, 72, 75); 
 
    background-color: rgba(64, 72, 75, 0.14902); 
 
} 
 

 
.name { 
 
    color: rgb(255, 255, 255); 
 
    background-color: rgb(64, 72, 75); 
 
    padding: 0px 7px; 
 
    word-wrap: break-word; 
 
    display:block; 
 
}

<div class="container"> 
 
    <div class="name">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div> 
 
</div> 
 
<div class="container" style="top: 150px"> 
 
    <div class="name">Lorem ipsum dolor sit amet aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaae</div> 
 
</div> 
 
<div class="container" style="top: 300px"> 
 
    <div class="name">a</div> 
 
</div>

来源

2017-02-10 09:11:59

添加此属性字突破：打破字;你。名称类

.container { 
 
    position: absolute; 
 
    overflow: hidden; 
 
    width: 200px; 
 
    height: 100px; 
 
    border: 2px solid rgb(64, 72, 75); 
 
    background-color: rgba(64, 72, 75, 0.14902); 
 
} 
 

 
.name { 
 
color: rgb(255, 255, 255); 
 
background-color: rgb(64, 72, 75); 
 
padding: 0px 7px; 
 
/* word-wrap: break-word; */ 
 
display: inline-block; 
 
word-break: break-word; 
 
}

<div class="container"> 
 
    <div class="name">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div> 
 
</div> 
 
<div class="container" style="top: 150px"> 
 
    <div class="name">Lorem ipsum dolor sit amet aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div> 
 
</div> 
 
<div class="container" style="top: 300px"> 
 
    <div class="name">a</div> 
 
</div>

来源

2017-02-10 09:15:25

工作中断正在工作，但不支持IE 10 – thinhng

是的，Word-打破IE11以上的作品。 –

只需加字断：盈亏所有;到.NAME类..那是它...

.container { 
 
    position: absolute; 
 
    overflow: hidden; 
 
    width: 200px; 
 
    height: 100px; 
 
    border: 2px solid rgb(64, 72, 75); 
 
    background-color: rgba(64, 72, 75, 0.14902); 
 
} 
 

 
.name { 
 
    color: rgb(255, 255, 255); 
 
    background-color: rgb(64, 72, 75); 
 
    padding: 0px 7px; 
 
    word-wrap: break-word; 
 
    display: inline-block; 
 
    word-break: break-all; 
 
}

<div class="container"> 
 
    <div class="name">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div> 
 
</div> 
 
<div class="container" style="top: 150px"> 
 
    <div class="name">Lorem ipsum dolor sit amet aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div> 
 
</div> 
 
<div class="container" style="top: 300px"> 
 
    <div class="name">a</div> 
 
</div>

来源

2017-02-10 09:16:47

如何打破长字到新的生产线在inline-block的DIV

回答

相关问题