个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-28 12:16:45 25 4
gpt4 key购买 nike

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

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

我知道有人问过这个问题，但我尝试过的所有解决方案都没有奏效，即:word-wrap、text-wrap、overflow-wrap。

我的文本宽度为 344 像素，我希望我的其余文本符合该边界和/或不超过该边界。我一直将此指定宽度设置为 344 甚至更小，而最后一组文本尤其会引起问题。这是问题的屏幕截图以及我的 HTML 和 CSS。感谢您的帮助!

http://imageshack.us/photo/my-images/706/1fj8.png/

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

最佳答案

你用过吗？如果您的文本占用超过 344 像素，那么它会被截断，导致其中一些无法阅读。

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

关于jquery - 超出其 DIV 指定宽度的文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19130036/

25 4 0
文章推荐： javascript - 如何更改数组输出
文章推荐： javascript - 在 Angular 5 中将多个 FormGroup 类型转换并连接为对象类型
文章推荐： swift - 某些数据未从 Firebase 数据库 Swift 3 中读取
文章推荐： css - Logo 在 css 中重叠？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com