jquery - 超出其 DIV 指定宽度的文本

Question

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

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;
    }

score 0 · Accepted Answer

有一种方法可以在不使用固定大小的情况下做到这一点，诀窍是使用包装容器使容器适合其内容的大小，并使用包装容器从文档流中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 插件两次，这些引用应该只进行一次。

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

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

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

在我看来，您正在寻找的是FitText 插件

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

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

PS 你忘了从 chrome 的地址栏和 mac 的右上角删除你的全名。

jquery - 超出其 DIV 指定宽度的文本

3 回答 3

Related

Reference