文本達到超過其DIV

編輯的指定寬度：另一種形象，進一步展示我的問題：文本達到超過其DIV

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

來源

2013-10-02 jjfxx

你確定這個文本是344px嗎？在CSS中，小文本不能佔用'.letter-container'中指定的空間。我建議您使用瀏覽器的檢查工具來分析頁面中元素的大小 –

如何獲取瀏覽器檢查工具？順便說一下，我使用的是Chrome。我能夠看到文本寬度的唯一方法是通過屏幕截圖和Photoshop。我覺得這是準確的，因爲我現在沒有任何反應或流體。 – jjfxx

F12應該調出開發工具窗口，第一個選項卡顯示您的DOM結構，突出顯示一個元素顯示一個小工具提示，其大小 –

你用過嗎？如果你的文本佔用超過344px，那麼它將被截斷，使其中的一些不可讀。

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

來源

2013-10-02 04:39:32 Lance

嗯，這就是問題所在：我希望能夠閱讀我的所有文本。我不希望它被奇怪地切入。：/ – jjfxx

那麼，如果div內的文本足夠長，那麼就沒有辦法解決它。檢查我的更新的答案，看看是否有幫助 – Lance

這是最小寬度，是不是最小的可以但它仍然可以是更大的是瀏覽器允許它？我希望它完全或不到344像素。 – jjfxx

在我看來，這就是你正在尋找的是the FitText plugin

它將擴展您的文本的寬度相對於在與屏幕的。

Althoug你的情況，你可能想縮放文本父元素的寬度，在這種情況下，你可以嘗試使用我的腳本（尚未插件）：http://mirohristov.com/mirofittext/

附：您忘記從Chrome中的地址欄和Mac的右上角刪除您的全名。

來源

2013-10-02 05:00:40 Miro

是的，我想要文本縮放到它所在的DIV的寬度。如何使用您的腳本，因爲它不是一個插件，我沒有看到任何地方下載它？ – jjfxx

其實，我還想了一會兒。我不確定這會起作用，因爲我不想讓文字的高度發生改變，我想要我的字體大小。我只是不想讓文字的行數超過344像素的寬度。如果一條線到達或即將到達，我希望它自動進入下一行而不用中斷。 – jjfxx

你能提供指向網站或zip文件的鏈接？很難使用截圖和代碼。 – Miro

有一種方法可以在不使用固定大小的情況下做到這一點，訣竅是使容器適合其內容的大小，使用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>

來源

2013-10-03 06:50:14

文本達到超過其DIV

回答

相關問題