Question

我有两个div，其中包含一些文字。如果我缩小窗口，则div的文本将溢出。如何更改div s＆＃39;文本如果使用JavaScript / jQuery溢出的高度？

示例截图：

HTML：

<div id = "creators" class = "big-part">
            <h3>Creators</h3>
            <div class = "creator_name">
                <h4>FlipFloop</h4>
                <p>FlipFloop is a <span id = "flip_age">14</span>&nbsp;year-old boy. He is French and American and is the original creator of Altrifi.
                FlipFloop programs in JavaScript, HTML, CSS and jQuery. He uses AngularJs, ProcessingJs and Bootstrap. FlipFloop is good in math, and he loves putting easter eggs, 
                secret messages and trying out new animations in his webpages.</p>
            </div>
            <div class = "creator_name">
                <h4>TickTock</h4>
                <p>TickTock is FlipFloop's brother. He is 13 and is also French and American. TickTock programs in Javascript, HTML and CSS. He uses the ProcessingJs library.</p>
            </div>
            <!--<div class = "creator_name">
                <h4>Name</h4>
                <p>Text</p>
            </div>-->
        </div>

CSS：

.creator_name {
    width: 35%;
    vertical-align: top;
    display: inline-block;
    margin: 2% 2%;
    height: 300px;
}

Answer 1

您不需要JavaScript，仅限CSS word-break: break-all;：

＆＃13;

<div style="word-break: break-all;">asdasdasdasdasdasdasdasd asdasdasdasdasdasdasdasd asdasdasdasdasdasdasdasd asdasdasdasdasdasdasdasd asdasdasdasdasdasdasdasd asdasdasdasdasdasdasdasd asdasdasdasdasdasdasdasd asdasdasdasdasdasdasdasd asdasdasdasdasdasdasdasd asdasdasdasdasdasdasdasd asdasdasdasdasdasdasdasd asdasdasdasdasdasdasdasd </div>

＆＃13;

顺便说一句，你的代码确实有效（但它看起来不像截图，我想你错过了什么）

＆＃13;

.creator_name {
  width: 35%;
  vertical-align: top;
  display: inline-block;
  margin: 2% 2%;
}

＆＃13;

<div id="creators" class="big-part">
  <h3>Creators</h3>
  <div class="creator_name">
    <h4>FlipFloop</h4>
    <p>FlipFloop is a <span id="flip_age">14</span>&nbsp;year-old boy. He is French and American and is the original creator of Altrifi. FlipFloop programs in JavaScript, HTML, CSS and jQuery. He uses AngularJs, ProcessingJs and Bootstrap. FlipFloop is good
      in math, and he loves putting easter eggs, secret messages and trying out new animations in his webpages.</p>
  </div>
  <div class="creator_name">
    <h4>TickTock</h4>
    <p>TickTock is FlipFloop's brother. He is 13 and is also French and American. TickTock programs in Javascript, HTML and CSS. He uses the ProcessingJs library.</p>
  </div>
  <!--<div class = "creator_name">
                <h4>Name</h4>
                <p>Text</p>
            </div>-->
</div>

＆＃13;

Answer 2

我建议使用恒定高度的文本。

设置高度：200px或更高，以便您的文字适合

文本溢出时更改div高度

2 个答案: