Question

我有以下示例

第一个和第三个例子的设计是正确的，但是我无法找到一种方法来使例2中的长词正确地破坏这个词。有没有办法只使用CSS？

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

将此属性 word-break：break-word; 添加到 .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-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>

Answer 2

您必须为内嵌块元素设置 max-width 。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

只需添加分词：break-all;到.name class ..就是这样......

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

您可以删除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>

如何在一个内联块div中将长字分成新行

4 个答案: