Question

我遇到的问题是“word-wrap：break-word;”当试图与另一个DIV水平对齐时，它在DIV中。看到这两个例子很容易理解我的问题：

#container {
  height: auto;
  overflow: hidden;
}
#left {
  background-color: green;
  width: 120px;
  height: 20px;
  overflow: hidden;
}
#right {
  width: calc(100% - 120px);
  float: right;
  height: auto;
  display: inline-block;
  word-wrap: break-word;
  background-color: red;
}

<div id="container">
  <div id="right">AAAAAAAAAAAAAAAAAAAAA</div>
  <div id="left"></div>
</div>

http://jsfiddle.net/galacticpower/a3nyxhtj/4/

在这里，如果调整导航器的大小，则根据需要打破正确的div文本！呀！

在右侧div中添加div及其样式会出现问题......

#inside_right{
  width: auto; 
  display: inline-block; 
  word-wrap:break-word;
  background-color: yellow;
}

<div id="container">
  <div id="right">
    <div id="inside_right">AAAAAAAAAAAAAAAAAAAAA</div>
  </div>
  <div id="left"></div>
</div>

http://jsfiddle.net/galacticpower/a3nyxhtj/3/

此处如果调整导航器的大小，则“word-wrap：break-word”属性将丢失。文字没破！我需要在右div中的div中应用一些样式而不会丢失这种行为。

总结一下，我希望第二个例子中的词语被破坏了......

有什么想法吗？

非常感谢你！

Answer 1

只需应用max-width: 100%强制字母在内嵌块#inside_right

内实际中断

#container {
    height: auto;
    overflow: hidden;
}

#left{
	  background-color: green;
    width: 120px;
    height: 20px;
    overflow: hidden;
}

#right{
  width: calc(100% - 120px); 
  float: right; 
  height: auto;
  display: inline-block; 
  word-wrap:break-word;
  background-color: red;
}

#inside_right{
  width: auto; 
  display: inline-block; 
  word-wrap:break-word;
  background-color: yellow;
  max-width: 100%;
}

<div id="container">
    <div id="right">
      <div id="inside_right">
         AAAAAAAAAAAAAAAAAAAAA 
      </div>
    </div>
    <div id="left"></div>
</div>

Answer 2

问题在于“显示”。你使用：

String

并且浏览器认为此div中的所有文本只是一个符号。你可以使用display：block并使用内部div的宽度。

这应该有帮助！

Answer 3

从'#inside_right'中丢失'display：inline-block'。我不明白为什么你也需要'＃right'，但'#inside_right'上的属性让你绊倒。

如何对齐两个div（一个是固定的，另一个是具有break字属性）？

3 个答案: