如何使外部div包含内联块？

Question

以下是示例： http://jsbin.com/ecuCAME/1/edit?html,css,output

HTML：

<div>
    <a href='#'>texttexttexttexttexttexttexttexttexttexttexttexttexttexttext</a>
</div>

CSS：

div {
  width: 200px;
  border: 1px dashed black;
}

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

如何在其样式中包装锚点并保留display: inline-block属性？

Answer 1

将width: 100%添加到div a {} CSS定义。

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

Working demo

Answer 2

要使word-wrap属性生效，您必须指定width的{​​{1}}属性。

jsBin Demo

anchor

Answer 3

这是你的意思吗？ live example

div {
    width: 200px;
    border: 1px dashed black;
    overflow: hidden;
}

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

Answer 4

如果我理解正确，只需编辑

width:200px;

到

width:100%;

但也许我只是不明白这个问题

Answer 5

当你像this一样使用它时，这应该有效：

div {
  width: 200px;
  border: 1px dashed black;
}

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