使外部div适合内部div文本

Question

我有一个可能有不同大小的外部div。另外，我的div内部有一些文字

示例：

raco

http://jsfiddle.net/g2an6yez/

问题是外部div的背景在内部div文本的顶部具有边框。

有什么方法可以在文本行上设置边框而不拆分字母？

有什么方法可以知道div必须与文本行匹配的大小吗？

Answer 1

我认为行高可以帮助您。

line-height: 20px;

特别是20像素，因为在您的100像素框中，您可以精确放置5行。

Answer 2

您可以在红色框中使用height，它是文本line-height的倍数。

在下面的示例中，我希望红色框高4行，因此我将height设置为4 x 1.5 = 6em。

.box {
  font-size: 1em;
  line-height: 1.5;
  width: 100px;
  background-color: red;
  height: 6em; /* this will be 4 lines */
}

<div class="box">
  <div class="text">
    iughwekrug hiwerjgergwteg iuhtighrtj grtjng kjhnlgwjen lkgjnwe kljgnlkwerjn gkljewrn gkljnwerklgjnweklrjgnklwejrngkljewrngkljnwerkljgnklwerjngkljewrn klgjenwrklgjnwerklgjn klewrjgnklwejrnglkjwe wjbtlgwrljnvlwkj englkjwn tkljnwjglwtkjnglkjewrng lkjwerng
    lkjwetngl kjwgklj nwtgkljnglkjwtn glkjnrtkljgn wkjtgn lkwtjnglk wjnkgl nwtkljgnkltrjn lkjntlk jnlkgnkltjng kbb jrtnvjht fjgljnerkljng ljwernlgkjwnelkjgn lkwejrgnl kwjetng lkwjngkjwntglk jwntgkljnwkj nwlklkwjntglkjwn gkjwngkljwnt lkjgnwtkljng klwtngkljwtn
    lkjwtngklj nwtklgjnwklt jnglkwjnt gkljwntlkg jnwlktgn klwjngl jnwtklgjnwkl tjngklwjtng klwjntgkl jwtngklj nwtklgjnkw ljngkjwnt klgjnwtklj gnjrwbjwr
  </div>
</div>

注意：line-height length unit中有一个lh css4 draft spec，据说是

  

等于使用该元素的元素的line-height属性的计算值，并转换为绝对长度。

但这仍然被标记为实验性的，缺乏任何支持。

Answer 3

我不确定我是否正确理解了您的问题，如果这不是您不允许拆分您的信件的意思，而是您可以尝试设置一个 空白：nowrap; 溢出-y：滚动; 到您的外部div，以便您的文本不会中断，也不会从外部div溢出，或者尝试相应地使用以下代码段

<div style="height:100px; width:300px;background-color:red;overflow:scroll;overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;">
  <div>
      iughwekrug hiwerjgergwteg iuhtighrtj grtjng kjhnlgwjen lkgjnwe kljgnlkwerjn gkljewrn gkljnwerklgjnweklrjgnklwejrngkljewrngkljnwerkljgnklwerjngkljewrn klgjenwrklgjnwerklgjn klewrjgnklwejrnglkjwe wjbtlgwrljnvlwkj englkjwn tkljnwjglwtkjnglkjewrng lkjwerng lkjwetngl kjwgklj nwtgkljnglkjwtn glkjnrtkljgn wkjtgn lkwtjnglk wjnkgl nwtkljgnkltrjn lkjntlk jnlkgnkltjng kbb jrtnvjht fjgljnerkljng ljwernlgkjwnelkjgn lkwejrgnl kwjetng lkwjngkjwntglk jwntgkljnwkj nwlklkwjntglkjwn gkjwngkljwnt lkjgnwtkljng klwtngkljwtn lkjwtngklj nwtklgjnwklt jnglkwjnt gkljwntlkg jnwlktgn klwjngl jnwtklgjnwkl tjngklwjtng klwjntgkl jwtngklj nwtklgjnkw ljngkjwnt klgjnwtklj gnjrwbjwr
  </div>

</div>

希望这会有所帮助：D