Текст, превышающий указанную ширину его DIV

Question

Текст, превышающий указанную ширину его DIV

0

EDIT: Еще один образ, чтобы продемонстрировать мою проблему:

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

Я знаю, что этот вопрос задан, но каждое решение, которое я попробовал, не сработало, т.е. Слово-wrap, text-wrap, overflow-wrap.

У меня есть текст, который имеет размер 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;
    }

jjfxx 02 окт. 2013, в 06:52

Источник

0

Вы уверены, что текст 344px? с вашим CSS небольшой текст не может занимать больше места, чем указано в .letter-container . Я предлагаю вам использовать инструменты проверки вашего браузера для анализа размера элементов на вашей странице
koala_dev 02 окт. 2013, в 04:47
0

Как добраться до инструментов проверки браузера? Кстати, я пользуюсь Chrome. Единственный способ увидеть ширину текста - снимки экрана и фотошоп. Я чувствовал, что это точно, так как сейчас у меня нет ничего адаптивного или подвижного.
jjfxx 02 окт. 2013, в 04:48
0

F12 должен вызвать окно инструментов разработчика, первая вкладка показывает вашу структуру DOM, выделение элемента показывает небольшую подсказку с его размером
koala_dev 02 окт. 2013, в 04:50
0

Да, инструменты показывают мне, что текст "HELLO" меньше 344 пикселей, но я не уверен, почему, когда я делаю снимок экрана, он не точный. Я не уверен, как еще измерить это, я думаю, что мне просто придется уменьшать пиксели, пока я не достигну этого и не посмотрю, как это происходит. Спасибо, что рассказали мне об инструментах, я никогда не знал, что они существуют
jjfxx 02 окт. 2013, в 04:57
0

Я пошел вперед и сделал снимок экрана, когда я использовал инструменты. Текст заголовка действительно имеет ширину 344 пикселя, но остальная часть соответствует ширине 379 пикселов, даже если для каждого отдельного DIV или элемента установлена ширина 344 пикселя. imageshack.us/photo/my-images/405/cvtc.png
jjfxx 02 окт. 2013, в 05:13
0

Изображение показывает #heading контейнер будучи 344px, текст «HELLO» на самом деле меньше , чем это, я не знаю , почему вы получаете это несоответствие между Chrome и Photoshop, может быть , вы увеличили масштаб в Chrome?
koala_dev 02 окт. 2013, в 05:25
0

Я не увеличен в Chrome вообще. У меня также полноэкранное окно браузера. Когда вы наводите курсор на элементы, появляется 344 пикселя, но если вы измеряете ту голубую подсветку, которую он использует, подсветка не будет 344 пикселя. Я думаю, что подсветка вводит в заблуждение и не показывает истинный размер, потому что, хотя он говорит 344px, он измеряет до 379px.
jjfxx 02 окт. 2013, в 05:34
0

Это странно, у меня никогда не было проблем с тем, что Chrome Tools не дают правильные размеры, на самом деле я просто протестировал снимок экрана с элементом, и при измерении в Photoshop и Fireworks я получил правильное значение. Может быть, это проблема Mac? Попробуйте с другим браузером и посмотрите, какое значение вы получите
koala_dev 02 окт. 2013, в 05:45
0

Я получаю правильное значение в Firefox (хотя мой сайт на самом деле не работает, потому что свойство background-clip не поддерживается :(), и это показывает, что текст меньше 344. Я не уверен, почему это проблема в Chrome. Я действительно не хотел Mac. Это было требование моего университета. Я взял свои скриншоты, один из Firefox и один из Chrome, и поместил их обоих под одинаковыми руководствами, и я все еще получаю эту разницу. Я думаю, может быть, даже если мой зум на 100% в обоих, может быть, они по-прежнему разные значения рядом друг с другом? Это единственное, что я могу думать.
jjfxx 02 окт. 2013, в 06:06
0

Миро попросил .zip моей веб-страницы, может быть, это поможет haha dropbox.com/s/bghp5652oupqpzm/Current%20Web%20Work%202.zip
jjfxx 02 окт. 2013, в 06:23
0

Что касается тестирования на моей машине, Chrome сообщает об одном и том же: «HELLO» меньше 344px, я получаю тот же результат при измерениях в Photoshop, и теперь я начинаю думать, что проблема заключается в ваших скриншотах, потому что они, безусловно, сообщают о других размерах. В любом случае вы можете просто установить ширину контейнера в 326 пикселей, это фактический размер текста, вы можете проверить это самостоятельно, установив position:absolute на # #heading и измерения с помощью инструментов проверки
koala_dev 02 окт. 2013, в 07:05
0

Большое спасибо за вашу помощь, koala_dev. Я уверен, что это было неприятно, просто подумав. В итоге я просто выбрал ширину и размер текста как можно ближе, чтобы соответствовать, и сделал все остальное так же, и теперь это выглядит довольно хорошо. Взял больше, чем хотел, но оно того стоило!
jjfxx 02 окт. 2013, в 12:09

Показать ещё 10 комментариев

Теги:

jquery

html

css

width

text

3 ответа

Ещё вопросы

Вы уверены, что текст 344px? с вашим CSS небольшой текст не может занимать больше места, чем указано в .letter-container . Я предлагаю вам использовать инструменты проверки вашего браузера для анализа размера элементов на вашей странице
Как добраться до инструментов проверки браузера? Кстати, я пользуюсь Chrome. Единственный способ увидеть ширину текста - снимки экрана и фотошоп. Я чувствовал, что это точно, так как сейчас у меня нет ничего адаптивного или подвижного.
F12 должен вызвать окно инструментов разработчика, первая вкладка показывает вашу структуру DOM, выделение элемента показывает небольшую подсказку с его размером
Да, инструменты показывают мне, что текст "HELLO" меньше 344 пикселей, но я не уверен, почему, когда я делаю снимок экрана, он не точный. Я не уверен, как еще измерить это, я думаю, что мне просто придется уменьшать пиксели, пока я не достигну этого и не посмотрю, как это происходит. Спасибо, что рассказали мне об инструментах, я никогда не знал, что они существуют
Я пошел вперед и сделал снимок экрана, когда я использовал инструменты. Текст заголовка действительно имеет ширину 344 пикселя, но остальная часть соответствует ширине 379 пикселов, даже если для каждого отдельного DIV или элемента установлена ширина 344 пикселя. imageshack.us/photo/my-images/405/cvtc.png
Изображение показывает #heading контейнер будучи 344px, текст «HELLO» на самом деле меньше , чем это, я не знаю , почему вы получаете это несоответствие между Chrome и Photoshop, может быть , вы увеличили масштаб в Chrome?
Я не увеличен в Chrome вообще. У меня также полноэкранное окно браузера. Когда вы наводите курсор на элементы, появляется 344 пикселя, но если вы измеряете ту голубую подсветку, которую он использует, подсветка не будет 344 пикселя. Я думаю, что подсветка вводит в заблуждение и не показывает истинный размер, потому что, хотя он говорит 344px, он измеряет до 379px.
Это странно, у меня никогда не было проблем с тем, что Chrome Tools не дают правильные размеры, на самом деле я просто протестировал снимок экрана с элементом, и при измерении в Photoshop и Fireworks я получил правильное значение. Может быть, это проблема Mac? Попробуйте с другим браузером и посмотрите, какое значение вы получите
Я получаю правильное значение в Firefox (хотя мой сайт на самом деле не работает, потому что свойство background-clip не поддерживается :(), и это показывает, что текст меньше 344. Я не уверен, почему это проблема в Chrome. Я действительно не хотел Mac. Это было требование моего университета. Я взял свои скриншоты, один из Firefox и один из Chrome, и поместил их обоих под одинаковыми руководствами, и я все еще получаю эту разницу. Я думаю, может быть, даже если мой зум на 100% в обоих, может быть, они по-прежнему разные значения рядом друг с другом? Это единственное, что я могу думать.
Миро попросил .zip моей веб-страницы, может быть, это поможет haha dropbox.com/s/bghp5652oupqpzm/Current%20Web%20Work%202.zip
Что касается тестирования на моей машине, Chrome сообщает об одном и том же: «HELLO» меньше 344px, я получаю тот же результат при измерениях в Photoshop, и теперь я начинаю думать, что проблема заключается в ваших скриншотах, потому что они, безусловно, сообщают о других размерах. В любом случае вы можете просто установить ширину контейнера в 326 пикселей, это фактический размер текста, вы можете проверить это самостоятельно, установив position:absolute на # #heading и измерения с помощью инструментов проверки
Большое спасибо за вашу помощь, koala_dev. Я уверен, что это было неприятно, просто подумав. В итоге я просто выбрал ширину и размер текста как можно ближе, чтобы соответствовать, и сделал все остальное так же, и теперь это выглядит довольно хорошо. Взял больше, чем хотел, но оно того стоило!

koala_dev · Answer 1 · 2013-10-03T05-44-00.000Z

Там можно сделать это без использования фиксированного размера, трюк заключается в том, чтобы контейнер соответствовал размеру его содержимого, используя 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 и плагин с надписью дважды на своей странице, эти ссылки должны быть сделаны только один раз.
Вам не нужен отдельный <script> или $(function(){}) для каждого куска кода jquery, на самом деле это лучше, если на вашей странице есть только один обработчик документа, например:
```
<script type="text/javascript">
$(function() {
    $("#heading,#name").lettering();
    $("#aboutintro").delay(4000).fadeIn(500);
    $("#aboutbody").delay(6000).fadeIn(500);
});
</script>
```

Miro · Answer 2 · 2013-10-02T03-54-00.000Z

Мне кажется, что вы ищете плагин FitText

Он будет масштабировать текст до ширины относительно экрана.

Althoug в вашем случае вам может понадобиться масштабировать текст до ширины родительского элемента, и в этом случае вы можете попробовать использовать мой скрипт (еще не плагин): http://mirohristov.com/mirofittext/

PS Вы забыли удалить свое полное имя из адресной строки в хроме и в верхнем правом углу вашего mac.

Да, я бы хотел, чтобы текст масштабировался до ширины DIV, внутри которой он находится. Как мне использовать ваш скрипт, так как это не плагин и я не вижу места для его загрузки?
Собственно, я думал об этом дальше. Я не уверен, что это сработает, потому что я не хочу, чтобы высота моего текста менялась, я хочу размеры шрифта, которые у меня есть. Я просто не хочу, чтобы строки текста достигали ширины 344 пикселя. Если одна строка доходит до или собирается, я хочу, чтобы она автоматически переходила на следующую строку без прерывания.
Можете ли вы предоставить ссылку на веб-сайт или почтовый файл? Трудно работать со скриншотами и просто кодом.
Дайте мне знать, если это работает dropbox.com/s/bghp5652oupqpzm/Current%20Web%20Work%202.zip
Понял. dl.dropboxusercontent.com/u/3770842/jessica/enter2.zip Дайте мне знать, если это работает для вас. Я добавил пустой символ в конце '|' и затем установите его непрозрачность 0. Причина, по которой у вас проблемы с этим текстом из-за обрезки текста в сочетании с курсивом.

Lance · Answer 3 · 2013-10-02T03-00-00.000Z

0

Вы использовали это? Если ваш текст занимает более 344 пикселей, он будет отключен, что сделает некоторые из них нечитаемыми.

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

Lance 02 окт. 2013, в 03:00

0

Ну, вот в чем проблема: я хочу иметь возможность читать весь мой текст. Я не хочу, чтобы это было странно нарезано. : /
jjfxx 02 окт. 2013, в 04:44
0

Ну, если текст внутри div достаточно длинный, то нет способа обойти это. проверьте мой обновленный ответ, чтобы увидеть, помогает ли это
Lance 02 окт. 2013, в 04:45
1

Это минимальная ширина, не правда ли, что она наименьшая, но все же может быть больше, если браузер это позволяет? Я хочу, чтобы он был точно или меньше 344 пикселей.
jjfxx 02 окт. 2013, в 04:51
0

Ну, вам нужно изменить размер шрифта, если длина строки превышает определенную величину. Вам понадобится JS для этого. Ничего, что CSS может сделать для вас здесь.
Lance 02 окт. 2013, в 04:53

Показать ещё 2 комментария