CSS自动换行:断字不包装标签，除非您将其包装在div中并在其中添加规则 [英] CSS word-wrap: break-word not wrapping a tag unless you wrap it in div and add rule there

问题描述

CSS为什么要统治

a {
  word-wrap: break-word;
}

与

<div>
  <a href="...">verylongurlherewithnospaces</a>
</div>

不环绕并导致窗口显示滚动条，而

not wrapping and causing window to show scrollbar, whereas

div {
  word-wrap: break-word;
}

在其锚定子文本上换行是否可以?

will do the wrapping at its anchor child's text fine?

更新: 刚刚注意到(请参阅此表单(在调整窗口大小时)，除了建议的display:inline-block之外，我还需要word-break:break-all而不是word-wrap:break-word，所以现在使用:

UPDATE: just noticed (see L3ST-instance URL field at this form when you resize the window) that I needed word-break:break-all instead of word-wrap:break-word, apart from the suggested display:inline-block, so now using:

a
{
  word-break: break-all !important; /* make sure containers don't override */
  display: inline-block !important;
}

效果很好

推荐答案

CSS word-wrap: break-word;仅在display:block;或display:inline-block;元素中有效，因此您可以使用:

The CSS word-wrap: break-word; works only in display:block; or display:inline-block; elements so you can just use:

a {
  display:inline-block;
  word-wrap: break-word;
}

a {
  width:100px;
  word-wrap: break-word;
  display:inline-block;
}

<div>
  <a href="...">verylongurlherewithnospaces</a>
</div>

P.S.用户代理将div默认为display:block;.

P.S. div are display:block; as default by user-agent.

这篇关于CSS自动换行:断字不包装标签，除非您将其包装在div中并在其中添加规则的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！