超出其 DIV 指定宽度的文本答案

【问题标题】：Text reaching over the specified width of its DIV超出其 DIV 指定宽度的文本
【发布时间】：2013-10-08 10:19:51
【问题描述】：

编辑：另一张图片进一步展示我的问题：

http://imageshack.us/photo/my-images/405/cvtc.png/

我知道有人问过这个问题，但我尝试过的每个解决方案都没有奏效，即：自动换行、文本换行、溢出换行。

我有一个宽度为 344 像素的文本，并希望我的其余文本符合该边界和/或不流过它。我一直将这个指定的宽度设置为 344 甚至更小，而最后一组文本尤其会导致问题。这是该问题以及我的 HTML 和 CSS 的屏幕截图。任何帮助表示赞赏！

HTML

    <!doctype html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Jessica ___: PORTFOLIO</title>

    <link rel="stylesheet" type="text/css" href="style1.css">
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" src="jquery.lettering.js"></script>
    <link href='http://fonts.googleapis.com/css?family=Quicksand:300,400,700' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Playfair+Display:700italic' rel='stylesheet' type='text/css'>

    </head>
    <body>

<div id="letter-container" class="letter-container">
                <div id="heading">HELLO</div>
                <div id="aboutintro">My name is</div>
                <div id="name">jessica ___</div>
                <div id="aboutbody">and I'm a student at the College of Design, Architecture, Art, and Planning of the University of Cincinnati and I like to design websites and take pictures.</div>

        </div>

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script type="text/javascript" src="jquery.lettering.js"></script>
        <script type="text/javascript">
            $(function() {
                $("#heading").lettering();
            });
        </script>

        <script type="text/javascript">
      $(function(){
      $("#aboutintro").delay(4000).fadeIn(500);
      });
      </script>

      <script type="text/javascript">
            $(function() {
                $("#name").lettering();
            });
        </script>

        <script type="text/javascript">
       $(function(){
       $("#aboutbody").delay(6000).fadeIn(500);
       });
       </script>

    </div>
    </body>

    </html>

CSS

    @charset "UTF-8";
    /* CSS Document */


     html { 
     background: url(grungebg.png) no-repeat center center fixed; 
     -webkit-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover;
     background-size: cover;
     margin:0;
     padding:0;
     }


     @font-face {
     font-family: 'league_gothicregular';
     src: url('leaguegothic-regular-webfont.eot');
     src: url('leaguegothic-regular-webfont.eot?#iefix') format('embedded-opentype'),
     url('leaguegothic-regular-webfont.woff') format('woff'),
     url('leaguegothic-regular-webfont.ttf') format('truetype'),
     url('leaguegothic-regular-webfont.svg#league_gothicregular') format('svg');
    font-weight: normal;
    font-style: normal;

    }

    .letter-container
    {
margin-left:auto;
margin-right:auto;
width:344px;
text-align:center;
    }

    #heading {
font-family: league_gothicregular, sans-serif;
    }

    #heading span {
font-size: 200px;
background-image: url(mask.png);
-webkit-background-clip: text;
background-clip: text;
color: rgba(0,0,0,0);
-webkit-text-fill-color: transparent;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
transition: all 0.3s linear;
-webkit-animation: sharpen 0.6s linear backwards;
-moz-animation: sharpen 0.6s linear backwards;
-ms-animation: sharpen 0.6s linear backwards;
animation: sharpen 0.6s linear backwards;
    }
    #heading span:nth-child(1) {
-webkit-animation-delay: 2.2s;
-moz-animation-delay: 2.2s;
-ms-animation-delay: 2.2s;
animation-delay: 2.2s;
    }
    #heading span:nth-child(2) {
-webkit-animation-delay: 2.6s;
-moz-animation-delay: 2.6s;
-ms-animation-delay: 2.6s;
animation-delay: 2.6s;
    }
    #heading span:nth-child(3) {
-webkit-animation-delay: 2.9s;
-moz-animation-delay: 2.9s;
-ms-animation-delay: 2.9s;
animation-delay: 2.9s;
    }
    #heading span:nth-child(4) {
-webkit-animation-delay: 2.4s;
-moz-animation-delay: 2.4s;
-ms-animation-delay: 2.4s;
animation-delay: 2.4s;
    }
    #heading span:nth-child(5) {
-webkit-animation-delay: 3s;
-moz-animation-delay: 3s;
-ms-animation-delay: 3s;
animation-delay: 3s;
    }
    #heading span:nth-child(6) {
-webkit-animation-delay: 2.7s;
-moz-animation-delay: 2.7s;
-ms-animation-delay: 2.7s;
animation-delay: 2.7s;
    }
    }
    @keyframes sharpen {
    0% {
opacity: 0;
text-shadow: 0px 0px 100px #fff;
color: transparent;
     }
    90% {
opacity: 0.9;
text-shadow: 0px 0px 10px #fff;
color: transparent;
    }
    100% {
    color: #fff;
opacity: 1;
text-shadow: 0px 0px 2px #fff, 1px 1px 4px rgba(0,0,0,0.7);
    }
    }
    @-moz-keyframes sharpen {
    0% {
opacity: 0;
text-shadow: 0px 0px 100px #fff;
color: transparent;
    }
    90% {
opacity: 0.9;
text-shadow: 0px 0px 10px #fff;
color: transparent;
    }
    100% {
    color: #fff;
opacity: 1;
text-shadow: 0px 0px 2px #fff, 1px 1px 4px rgba(0,0,0,0.7);
    }
    }
    @-webkit-keyframes sharpen {
    0% {
opacity: 0;
text-shadow: 0px 0px 100px #fff;
color: transparent;
    }
    90% {
opacity: 0.9;
text-shadow: 0px 0px 10px #fff;
color: transparent;
    }
    100% {
    color: #fff;
opacity: 1;
text-shadow: 0px 0px 2px #fff, 1px 1px 4px rgba(0,0,0,0.7);
    }
    }
    @-ms-keyframes sharpen {
    0% {
opacity: 0;
text-shadow: 0px 0px 100px #fff;
color: transparent;
    }
    90% {
opacity: 0.9;
text-shadow: 0px 0px 10px #fff;
color: transparent;
    }
    100% {
    color: #fff;
opacity: 1;
text-shadow: 0px 0px 2px #fff, 1px 1px 4px rgba(0,0,0,0.7);
    }
    }
    #aboutintro
    {
font-family: 'Quicksand', sans-serif;
font-size:65px;
font-weight:300;
color:white;
display:none;
    }
    #name{
font-family: 'Playfair Display', serif;
font-size:65px;
font-weight:700;
font-style:italic;
background-image: url(mask.png);
-webkit-background-clip: text;
background-clip: text;
color: rgba(0,0,0,0);
-webkit-text-fill-color: transparent;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
transition: all 0.3s linear;
-webkit-animation: sharpen 0.6s linear backwards;
-moz-animation: sharpen 0.6s linear backwards;
-ms-animation: sharpen 0.6s linear backwards;
animation: sharpen 0.6s linear backwards;
-webkit-animation-delay: 5s;
-moz-animation-delay: 5s;
-ms-animation-delay: 5s;
animation-delay: 5s;
text-align:center;
    }
    }
    @keyframes sharpen {
    0% {
opacity: 0;
text-shadow: 0px 0px 100px #fff;
color: transparent;
    }
    90% {
opacity: 0.9;
text-shadow: 0px 0px 10px #fff;
color: transparent;
    }
    100% {
    color: #fff;
opacity: 1;
text-shadow: 0px 0px 2px #fff, 1px 1px 4px rgba(0,0,0,0.7);
    }
    }
    @-moz-keyframes sharpen {
    0% {
opacity: 0;
text-shadow: 0px 0px 100px #fff;
color: transparent;
    }
    90% {
opacity: 0.9;
text-shadow: 0px 0px 10px #fff;
color: transparent;
    }
    100% {
    color: #fff;
opacity: 1;
text-shadow: 0px 0px 2px #fff, 1px 1px 4px rgba(0,0,0,0.7);
    }
    }
    @-webkit-keyframes sharpen {
    0% {
opacity: 0;
text-shadow: 0px 0px 100px #fff;
color: transparent;
    }
    90% {
opacity: 0.9;
text-shadow: 0px 0px 10px #fff;
color: transparent;
    }
    100% {
    color: #fff;
opacity: 1;
text-shadow: 0px 0px 2px #fff, 1px 1px 4px rgba(0,0,0,0.7);
    }
    }
    @-ms-keyframes sharpen {
    0% {
opacity: 0;
text-shadow: 0px 0px 100px #fff;
color: transparent;
    }
    90% {
opacity: 0.9;
text-shadow: 0px 0px 10px #fff;
color: transparent;
    }
    100% {
    color: #fff;
opacity: 1;
text-shadow: 0px 0px 2px #fff, 1px 1px 4px rgba(0,0,0,0.7);
    }
    }




    #aboutbody
    {
font-family: 'Quicksand', sans-serif;
font-size:12px;
font-weight:400px;
color:#e5e5e5;
display:none;
margin-left:auto;
margin-right:auto;
padding:0;
margin:0;
    }

【问题讨论】：

你确定文本是 344px 吗？使用您的 CSS，小文本不能占用比.letter-container 中指定的空间更多的空间。我建议您使用浏览器的检查工具来分析页面中元素的大小
如何使用浏览器检查工具？顺便说一句，我正在使用 Chrome。我能够看到文本宽度的唯一方法是通过屏幕截图和 Photoshop。我觉得它是准确的，因为我现在没有任何反应或流畅。
F12 应该会打开开发者工具窗口，第一个选项卡显示您的 DOM 结构，突出显示一个元素会显示一个带有其大小的小工具提示
是的，工具显示“HELLO”的文本小于 344 像素，但我不确定为什么截屏时显示不准确。我不确定如何测量它，我想我只需要降低像素，直到我到达它，看看它是如何进行的。感谢您告诉我这些工具，我从来不知道它存在
我在使用这些工具时继续拍摄了屏幕截图。标题文本确实是 344 像素的宽度，但即使我将每个单独的 DIV 或元素设置为 344 像素的宽度，其余部分也符合 379 像素的宽度。 imageshack.us/photo/my-images/405/cvtc.png

标签： jquery html css text width

【解决方案1】：

有一种方法可以在不使用固定大小的情况下做到这一点，诀窍是使用display:inline-block 使容器适合其内容的大小，并从文档中删除除#heading（“HELLO”文本）之外的所有内容使用包装容器流动：

HTML

<div id="letter-container" class="letter-container">
    <div id="heading">HELLO!</div>
    <div id="content">
        <div id="aboutintro">My name is</div>
        <div id="name">jessica ___</div>
        <div id="aboutbody">and I'm a student at the College of Design, Architecture, Art, and Planning of the University of Cincinnati and I like to design websites and take pictures.</div>
    </div>
</div>

CSS

body{
    text-align: center; /*We need this since we are moving from block elements to inline-blocks*/
}

#letter-container
{
    display: inline-block; /*Fit to content*/
    position: relative; /*Base for #content positioning/dimension */
}

#heading {
    font-family: league_gothicregular, sans-serif;
    display: inline-block; /* Fit to content */
}

#content{
    position: absolute; /*Remove from document flow*/
    width: 100%; /*Set the width to that of the container*/
    box-sizing:border-box; /*This is just here to align the borders below*/
}

/*Some test borders to illustrate alignment*/
#heading, #content{
    border-right: solid 1px red;
    border-left: solid 1px red;
}

现在您不必担心测量文本的实际大小，如果您决定更改标题的文本，也无需更改。

现在我还想给你一些关于你的代码的注释：

您在页面中同时加载了 jquery 和 lettering 插件两次，这些引用只能进行一次。

您不需要为每段 jquery 代码单独使用 <script> 标记或 $(function(){})，事实上，如果您的页面中只有一个文档就绪处理程序会更好，例如：

<script type="text/javascript">
$(function() {
    $("#heading,#name").lettering();
    $("#aboutintro").delay(4000).fadeIn(500);
    $("#aboutbody").delay(6000).fadeIn(500);
});
</script>

【讨论】：

【解决方案2】：

在我看来，您正在寻找的是the FitText plugin

它将您的文本缩放到相对于屏幕宽度的宽度。

在您的情况下，您可能希望将文本缩放到父元素的宽度，在这种情况下，您可以尝试使用我的脚本（尚未插件）：http://mirohristov.com/mirofittext/

附：您忘记从 chrome 的地址栏中和 mac 的右上角删除您的全名。

【讨论】：

是的，我希望文本缩放到它所在的 DIV 的宽度。我如何使用你的脚本，因为它不是一个插件，而且我没有看到任何下载它的地方？
其实我想多了。我不确定这是否可行，因为我不想改变文本的高度，我想要我拥有的字体大小。我只是不希望文本行超过 344 像素的宽度。如果一行到达或即将到达，我希望它自动转到下一行而不使用中断。
您能提供指向网站或 zip 文件的链接吗？很难使用屏幕截图和代码。
让我知道这是否有效dropbox.com/s/bghp5652oupqpzm/Current%20Web%20Work%202.zip
知道了。 dl.dropboxusercontent.com/u/3770842/jessica/enter2.zip 让我知道这是否适合您。我在末尾添加了一个空字符'|'然后将其设置为不透明度 0。由于文本剪切与斜体相结合，您对该文本有问题的原因。

【解决方案3】：

你用过这个吗？如果您的文本占用超过 344 像素，那么它将被截断，导致其中一些不可读。

.letter-container {
    margin-left:auto;
    margin-right:auto;
    min-width:344px;
    text-align:center;
}

【讨论】：

嗯，这就是问题所在：我希望能够阅读我的所有文本。我不希望它被奇怪地切成薄片。 ://
好吧，如果 div 内的文本足够长，那么就没有办法绕过它。检查我更新的答案，看看是否有帮助
那是最小宽度，是不是可以最小，但浏览器允许的话还是可以更大的？我希望它精确到或低于 344 像素。
好吧，如果字符串长度超过一定数量，您将需要更改字体大小。为此，您将需要 JS。 CSS 在这里无能为力。