首页 文章

为什么断字在这里不起作用？

提问于
浏览 次
0

http://codepen.io/rick-li/pen/oshCb

<div class="wrapper">
  <div class="left"></div>
  <span>lfjaslkjasldjfaljdfaldflasjflasjdfldasfsdafafasdfsdafadsfazxcvzvzxv</span>
</div>

.wrapper{
  width: 400px;
  height: 300px;
  border: solid 1px;
}

.wrapper .left{
  float: left;
  width: 200px;
  height: 200px;
  border: solid 1px;
  background-color: #111111
}

.wrapper span{
  word-wrap: break-word;
}

你会注意到文字掉到了底部，

如果文本中存在空格，它将包装正确并且位于怀特，所以我想知道为什么自动换行：break-word或word-wrap：break-all不起作用？

css

4 回答

  • 0

    NoobEditor参考你的回答你的意思是说“word-wrap只在有 no 空格而不是在单词中有空格时才有效？在上面的代码中自动换行不起作用的原因是错误的放置关闭div .

    <div class="wrapper">
    <div class="left"></div> <!-- here is your problem -->
    <span>lfjaslkjasldjfaljdfaldflasjflasjdfldasfsdafafasdfsdafadsfazxcvzvzxv</span>
</div>

    如果你在正确的位置关闭div标签，自动换行将起作用：

    <div class="wrapper"> 
    <div class="left">
    <span>lfjaslkjasldjfaljdfaldflasjflasjdfldasfsdafafasdfsdafadsfazxcvzvzxv</span>
    </div> <!-- close statement here -->
</div> <!-- close statement here -->

    看到它here

    回复于
  • 0

    .right 不应该 inline . 另外，为它指定一些宽度 .

    .wrapper .right{
  display: block;
  width: 200px;
}
.wrapper .right{
  word-break: break-all;
}

    DEMO here.

    回复于
  • 0

    您可以通过几种方式执行此操作，您可以更改 inline 的显示，以便您可以设置 max-width ，让它知道何时应该破坏该单词：

    http://codepen.io/anon/pen/ibvKq

    .wrapper .right{
  display: inline-block;
  max-width: 290px;
  word-wrap: break-word;
}

    或者，如果你想保留 inline ，你需要将 word-wrap: break-word; 与 white-space: pre; 耦合，但这确实意味着它将保留换行符和空格 . 就个人而言，我会使用第一个 .

    http://codepen.io/anon/pen/cfhwI

    .wrapper .right{
  display: inline;
  white-space: pre;
  word-wrap: break-word;
}
    回复于
  • 1

    你也可以使用 word-wrap: break-word ;

    .wrapper .right{
  display: block;
  width:200px;
}
.wrapper .right{
  word-wrap:break-word;
}
    回复于

相关问题