Css для элемента, который допускает разрывное слово в дочерних элементах div, но также может расширяться и принимать ширину своих дочерних элементов - PullRequest
Новая
       20

Css для элемента, который допускает разрывное слово в дочерних элементах div, но также может расширяться и принимать ширину своих дочерних элементов

10 голосов
/ 30 сентября 2011

Я пытаюсь определить, возможно ли создать css для элемента, который поддерживает word-wrap:break-word, но который также расширяется и принимает ширину своих дочерних элементов, когда разрыв не возможен. 

<html>
  <style>
  .outer {
    background-color:red;
    word-wrap:break-word;
  }
  </style>
  <div class="outer">
    User generated content:
    <a href="http://www.google.com">http://anannoyinglylongurlthatcausesthepagetogrowtolongunlessIusewordwrapbreakwordasdfasfasdfasdfasdfasdfasdfsadfasdfadsf</a>
    <table>
      <tr>
        <td>asdfasdfadsffdsasdfasdfsadfafsd</td>
        <td>asdfasdfadsffdaasdfassdffaafasds</td>
      </tr>
    </table>
    <img src="http://www.google.com/intl/en_com/images/srpr/logo3w.png"/>
  </div>
</html>

В приведенном выше примере URL-адрес корректно прерывается, но таблица и img переполняют красный внешний div, если окно становится меньшим, чем таблица.

Если я сделаю внешний div-дисплей: inline-block или display: table, красный внешний div правильно расширится, включив содержимое, но URL-адрес не будет разбит, если окно уже, чем URL.

Мне нужно это только для работы в WebKit (на Android), и я пытаюсь найти решение только для CSS (без Javascript).

Ответы [ 5 ]

8 голосов
/ 01 ноября 2011

Если я правильно понял, что вам нужно, все, что вам нужно, это overflow: auto установить на .outer.Вот пример: http://jsfiddle.net/hgLbh/1/ (проверено на safari & chrome).

Обновление:

После вашего комментария, связанного с прокруткой, я попробовал несколько других решений и нашелто, что удовлетворяет даже это.Я заранее скажу, что это грязно, но если вы можете работать с абсолютно позиционированным контентом и готовы дублировать сгенерированную разметку, я надеюсь, что это сработает (по крайней мере, на моем локальном сафари).это дублировать ваш контент и обернуть новый контент в 2 других div, чтобы HTML выглядел примерно так: 

<div class="outer-fixed">
    <div class="just-a-helper-wrapper">
        ... user generated content
    </div>
</div>
<div class="outer">
    ... same user generated content
</div>

А для CSS: 

.outer,
.outer-fixed {
    background-color:red;
    word-wrap:break-word;
    position: absolute;
    left: 0;
    right: 0;
}

.outer-fixed {
    position: fixed;
    right: 0;
}
.outer-fixed * {
    visibility: hidden;
}

Я бы хотелуказать, что just-a-helper-wrapper требуется только потому, что outer-fixed * не выбирает текстовые узлы (т. е. содержимое, которого нет в другом теге) - например, строка User generated content: в вашем примере все еще была бы видимой.Если у вас нет такого контента, вы можете удалить его.

Вот ссылка: http://jsfiddle.net/hgLbh/2/

7 голосов
/ 22 октября 2011

Назначение width: 100%; и использование table-layout: fixed; заставляют ячейки td соответствовать таблице и допускают перенос текста. 

  table {
        width:100%;
        table-layout:fixed
      }
3 голосов
/ 29 октября 2011

Я не знаю о мобильном веб-наборе, но это работало в Chrome

http://jsfiddle.net/HerrSerker/duDTz/1/

.outer {
    background-color:red;
    word-wrap:break-word;
    overflow:hidden;
  }

.outer table {
    width: 100%;
    table-layout:fixed
}

.outer * {
    max-width: 100%;
}
2 голосов
/ 04 ноября 2011

Глядя на спецификацию CSS, вполне вероятно, что то, что я пытаюсь сделать, невозможно, хотя я считаю, что вычисления размера довольно сложно расшифровать.Вот несколько важных битов:

http://www.w3.org/TR/CSS21/visudet.html

Ширина содержимого блоков незаменяемого встроенного элемента соответствует ширине отображаемого содержимого в них

Так что, если я хочу, чтобы фон моего содержащего ящика увеличивался до ширины дочерних элементов, мне нужно убедиться, что его макет рассчитан в контексте встроенного форматирования:

http://www.w3.org/TR/CSS21/visuren.html#normal-flow

Когда встроенный блок превышает ширину линейного блока, он разделяется на несколько блоков, и эти блоки распределяются по нескольким линейным полям.Если встроенный блок не может быть разделен (например, если встроенный блок содержит один символ, или правила разрыва слов для конкретного языка запрещают разрыв внутри встроенного блока, или если на встроенный блок влияет значение пробела nowrap или pre), то встроенное поле переполняет поле строки.

Отлично.Надеемся, что в правила прерывания также включены возможности аварийного переноса.

http://www.w3.org/TR/2010/WD-css3-text-20101005/#word-wrap

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

Не очень помогает;давайте посмотрим на более новую черновую спецификацию:

http://www.w3.org/TR/css3-text/#overflow-wrap

Возможности разрыва, не являющиеся частью 'overflow-wrap: normal', разрыв строки не учитывается при вычислении min-contentвнутренние размеры.

Это не очень понятно, но если внутренние размеры 'min-content' имеют какое-то отношение к тем же вычислениям, которые использовались для определения возможностей разрыва строки, мне может не повезти.

В итоге я просто использовал Javascript, чтобы измерить содержимое и решить, показывать ли его в блочном или встроенном контексте.Вздох. 

var messages = document.body.getElementsByClassName('mail_uncollapsed');

// Show overflowing content by setting element display to inline-block. This
// prevents break-word from being applied to the element, so we only do this
// if the element would overflow anyway.
for (var i = 0; i < messages.length; ++i) {
  var message = messages[i];
  message.style.display = 'block';
  var isOverflowing = message.clientWidth < message.scrollWidth;
  if (isOverflowing) {
    message.style.display = 'inline-block';
  }
}
2 голосов
/ 03 ноября 2011

Мне кажется, что у draevor есть ответ, но я подозреваю, что вы не хотите, чтобы полоса прокрутки отображалась в середине экрана на div. Если это так, и в зависимости от ваших ограничений, вы можете попытаться сделать это для div окна:

CSS 

html {height: 100%}
body {overflow: auto; height: 100%; margin: 0;}
.outer {
    word-wrap: break-word; 
    background-color: red;
    overflow: auto;
    min-height: 100%;
}
...