CSS自动换行和内联块不起作用

Question

我在<div>中没有空格（如网址）的长文字。

<div>
  <span>veryverylongtextwithoutspaces</span>    
</div>

如果我设置display:inline-block;，则自动换行不起作用！

如果我设置display: block，那么自动换行就可以了！但div宽度为100％。

我需要内容的大小div。谢谢

＆＃13;

＆＃13;

.block {
  display: block;
  border-radius: 3px;
  padding: 12px;
  background: #DCF8C6;
  color: #000000;
  word-wrap: break-word;
  font-size: 16px;
}
.inline {
  display: inline-block;
  border-radius: 3px;
  padding: 12px;
  background: #DCF8C6;
  color: #000000;
  word-wrap: break-word;
  font-size: 16px;
}

＆＃13;

<div class='block'>
  <span>veryverylongtextwithoutspaces</span>	
</div>

I want this, but not work "word-wrap":
<br>
<div class='inline'>
  <span>veryverylongtextwithoutspaces</span>	
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您必须定义内容容器的宽度。此外，我相信您会希望使用0.65代替word-break

word-wrap

p.keep {
  border: 1px solid #000;
  width: 150px;
  word-break: keep-all;
}

/* This will do what you want */
p.break {
  border: 1px solid #000;
  width: 150px;
  word-break: break-all;
}