Подтвердить что ты не робот

Растянуть текст, чтобы он соответствовал ширине div

У меня есть div с фиксированной шириной, но текст внутри div может измениться.

Есть ли способ установить с помощью css или другого интервала между буквами, чтобы текст всегда заполнял div идеально?

4b9b3361

ОТВЕТЫ

Ответ 1

Как сказал Марк, text-align:justify; является самым простым решением. Однако для короткого текста это не будет иметь никакого эффекта. Следующий код jQuery растягивает текст до ширины контейнера.

Он вычисляет пространство для каждого символа и устанавливает letter-spacing соответственно, чтобы текст растягивался до ширины контейнера.

Если текст слишком длинный для размещения в контейнере, он позволяет ему расширяться до следующих строк и устанавливает text-align:justify; в текст.

Вот демонстрационная версия:

$.fn.strech_text = function(){
    var elmt          = $(this),
        cont_width    = elmt.width(),
        txt           = elmt.html(),
        one_line      = $('<span class="stretch_it">' + txt + '</span>'),
        nb_char       = elmt.text().length,
        spacing       = cont_width/nb_char,
        txt_width;
    
    elmt.html(one_line);
    txt_width = one_line.width();
    
    if (txt_width < cont_width){
        var  char_width     = txt_width/nb_char,
             ltr_spacing    = spacing - char_width + (spacing - char_width)/nb_char ; 
  
        one_line.css({'letter-spacing': ltr_spacing});
    } else {
        one_line.contents().unwrap();
        elmt.addClass('justify');
    }
};


$(document).ready(function () {
    $('.stretch').each(function(){
        $(this).strech_text();
    });
});
p { width:300px; padding: 10px 0;background:gold;}
a{text-decoration:none;}

.stretch_it{ white-space: nowrap; }
.justify{ text-align:justify; }

.one{font-size:10px;}
.two{font-size:20px;}
.three{font-size:30px;}
.four{font-size:40px;}
.arial{font-family:arial;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="stretch one">Stretch me</p>
<p class="stretch two">Stretch me</p>
<p class="stretch three">Stretch <a href="#">link</a></p>
<p class="stretch two">I am too slong, an I would look ugly if I was displayed on one line so let me expand to several lines and justify me.</p>
<p  class="stretch arial one">Stretch me</p>
<p class="stretch arial three">Stretch me</p>
<p class="stretch arial four">Stretch me</p>
<p class="arial two">Don't stretch me</p>

Ответ 2

Это можно сделать с помощью text-align:justify и небольшого взлома. Смотрите здесь:

div{
  background-color:gold;
  text-align:justify;
}

span{
  background-color:red;
  width:100%;
  height:1em;
  display:inline-block;
}
<div>
  Lorem ipsum sit dolor
  <span> </span>
</div>

Ответ 3

Возможно, это могло бы помочь:

text-align:justify;

Ответ 4

Я нашел лучшее решение для текста короче, чем одна строка, без каких-либо дополнительных js или тегов, только один класс.

.stretch{ 
  /* We got 2rem to stretch */
  width: 5rem;
  /* We know we only got one line */
  height: 1rem;
  
  text-align: justify; 
}
.stretch:after{
    /* used to stretch word */
    content: '';
    width: 100%;
    display: inline-block; 
}
<div class="stretch">你好么</div>
<div class="stretch">你好</div>

Ответ 5

Еще более простым методом HTML/CSS будет использование flexbox. Это тоже сразу реагирует. Но стоит отметить, что SEO не поднимет его, если использовать его как h1 или что-то в этом роде.

HTML:

<div class="wrapper">
<div>H</div>
<div>e</div>
<div>l</div>
<div>l</div>
<div>o</div>
<div>&nbsp</div>
<div>W</div>
<div>o</div>
<div>r</div>
<div>l</div>
<div>d</div>

CSS:

.wrapper{
  width: 100%;
  text-align: center;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  border: 1px solid black;
}

jsfiddle здесь

Ответ 6

Немного опоздал на вечеринку, но для простой, чистой реализации CSS подумайте об использовании flexbox:

h1.stretch {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
<h1 class="stretch">
  <span>F</span>
  <span>o</span>
  <span>o</span>
  <span>B</span>
  <span>a</span>
  <span>r</span>
</h1>

Ответ 7

МАРТ 2018 Если вы решите этот вопрос в более актуальное время...

Я пытался сделать то, о чем спрашивал ОП, но одним словом, и добился успеха с помощью следующего:

1. Используйте <span> и установите css: span { letter-spacing: 0px; display:block}      (это делает элемент таким же широким, как и содержимое)

2. При нагрузке захватить ширину пролета let width = $('span').width();

3. Захватите длину промежутка let length = $('span').length;

4. Сброс ширины пролета до контейнера $('span').css({'width','100%'});

5. Захватите НОВУЮ ширину промежутка (или просто используйте ширину контейнера) let con = $('span').width();

6. Рассчитайте и установите интервал между буквами, чтобы заполнить контейнер $('span').css({'letter-spacing':(cont-width)/length})

Очевидно, что это можно преобразовать для использования vanilla js, и это полезно даже для большинства стилей шрифтов, включая не моноширинные шрифты.

Ответ 8

Некоторые из приведенных выше ответов работают хорошо, но текст должен обернуться многими детьми div
и в нем много лишних кодов.
Текст внутри div должен быть чистым, поэтому я сделал это с помощью JS.

const words = document.querySelector(".words"),
  wordsArray = words.innerText.split("").map(e => " " == e ? "<div>&nbsp</div>" : "<div>" + e + "</div>");
words.innerHTML = wordsArray.join("");
.words {
  width: 100%;
  text-align: center;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
}
<div class="words">This is the demo text</div>

Ответ 9

Я думаю, что вы на самом деле ищете масштабирование.

Измените свой шрифт с помощью красивого разрешения, которое имеет смысл, а затем используйте JS, чтобы растянуть его в контейнере с помощью css-преобразований:

transform: scale(1.05);

Преимущества этого в том, что ваш текст всегда будет остроумным, но вы столкнулись с проблемой того, что он становится слишком маленьким, чтобы быть читаемым.

Быстрое примечание: вам нужно, чтобы элемент, который вы пытаетесь сжать/развернуть, имеет абсолютную позицию:

position: absolute;

Ответ 10

Итак, продолжая грызть края этой проблемы, если вы объедините ответ wener , который растягивает короткие строки текста, с этим предложением использовать реальный элемент из другого потока, вы можете сделать все это без необходимости псевдокласса :after.

Вы заменяете фактический элемент и помещаете его после того, который хотите оправдать. И это вызовет выравнивание выравнивания таким же образом:

header {
  background-color: #ace;
  text-align: justify;
}

.hack {
  display: inline-block;
  width: 100%;
}
<header>
  <div>
    A line of text to justify
    <div class="hack"></div>
  </div>
</header>

Ответ 11

ссылка jsfiddle

Для решения исключительно HTML/CSS, когда вы работаете с еще более коротким текстом (достаточно коротким, чтобы

text-align: justify;

не сработает)

Я проследил этот великий пост как источник вдохновения и поместил каждое письмо в раздел

HTML:

<div class="wrapper">
    <div class="letters">H</div>
    <div class="letters">e</div>
    <div class="letters">l</div>
    <div class="letters">l</div>
    <div class="letters">o</div>
    <div class="letters">&nbsp</div>
    <div class="letters">W</div>
    <div class="letters">o</div>
    <div class="letters">r</div>
    <div class="letters">l</div>
    <div class="letters">d</div>
    <span class="stretch"></span>
</div>

CSS:

.wrapper {
    width: 300px; /*for example*/
    border: 1px solid gray; /*only for demonstrative purposes*/
    text-align: justify;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;
}

.letters {
    vertical-align: top;
    display: inline-block;
    *display: inline;
    zoom: 1
}

.stretch {
    width: 100%;
    display: inline-block;
    font-size: 0;
    line-height: 0
}