Почему элемент встроенного блока расширяется больше, чем его содержимое?

#width #css

#ширина #css

Вопрос:

Взгляните сюда: http://dabblet.com/gist/8d85e0e30b4d46e14654 .

Почему span элемент расширяется так, как если бы два слова находились в одной строке?
Есть ли способ предотвратить это и перенести его на минимально возможную ширину, заданную размером содержимого?

Редактировать:
Использование ‘пробела: nowrap;` не устраняет проблему.
Я пытаюсь сделать так, чтобы диапазон соответствовал тексту, а не текст соответствовал диапазону.
Вот почему родительский div имеет фиксированную ширину.

Вот скриншот.
введите описание изображения здесь

Спасибо.

1. Не могли бы вы объяснить немного больше?

2. Что ж, как вы можете видеть по ссылке, фон элемента больше, чем его содержимое.

3. Для меня это выглядит нормально. Я использую chrome.

4. Я тоже использую Chrome. Разве вы не видите, что серый фон больше, чем текст, который он переносит?

5. Нет. он подходит для этого серого цвета. В любом случае, не превышает.

Ответ №1:

Попробуйте так: ССЫЛКА

 span
{
    display:inline-block;
    background:#333333;
    color:#FFFFFF;
    white-space: nowrap;
    overflow: hidden;    
}
div
{
    width:80px;
}

Ответ №2:

CSS :

 span
{
    display:inline-block;
    background:#333333;
    color:#FFFFFF;
        white-space: nowrap;
}
div
{
    width:80px;
}

Ответ №3:

Это происходит потому, что слову не хватает места, чтобы заполнить его там. Если вы введете точно подходящее слово, оно не даст никакого пробела. Хорошо, я перейду к части ответа. Я собираюсь заставить слово показать как можно больше в этом месте, а затем перейти к следующей строке. Как? Используя свойство css word-break:break-all .

  span
 {
  display:inline-block;
  background:#333333;
  color:#FFFFFF;
  word-break:break-all;
 }

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

2. Если вы не хотите прерывать слово, удалите ширину из родительского элемента и назначьте его как max-width или назначьте ширину для основного div 5px;

3. Родительский div больше, чем требуется для диапазона. Я не хочу прикасаться к родительскому элементу. Проблема здесь в том, что элементы встроенного блока должны быть такими же широкими, как и их содержимое. Родительский контейнер в этом случае не влияет на ширину.

Ответ №4:

использовать

 white-space: nowrap;

для диапазона.

Попробуйте использовать white-space: pre-line; . Он создает разрыв строки везде, где в коде появляется разрыв строки, Но игнорирует дополнительные пробелы (табуляции, пробелы и т. Д.).

Также уменьшите ширину div.

ссылка : http://jsfiddle.net/29nrr /