Question

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

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

我知道这个问题已被提出，但我尝试的每个解决方案都没有用，即：自动换行，自动换行，溢出换行。

我有一些文字，我测量的宽度为344px，并希望我的其他文本符合该边界和/或不会流过它。我一直设置这个指定的宽度为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;
    }

Answer 1

你用过这个吗？如果你的文字占用超过344px，那么它将被切断，使其中一些不可读。

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

Answer 2

在我看来，你所寻找的是the FitText plugin

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

在你的情况下，你可能想要将文本缩放到父元素的宽度，在这种情况下你可以尝试使用我的脚本（还没有插件）：http://mirohristov.com/mirofittext/

P.S。您忘记从Chrome中的地址栏和Mac的右上角删除您的全名。

Answer 3

有一种方法可以在不使用固定大小的情况下执行此操作，诀窍是使用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和刻字插件，这些引用只应该进行一次。

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

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

文本超过其DIV的指定宽度

3 个答案: