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

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

<html>
  <style>
  .outer {
    background-color:red;
    word-wrap:break-word;
  }
  </style>
  <div class="outer">
    User generated content:
    <a href="#" onclick="location.href='http://www.google.com'; return false;">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), если это возможно.

Ответ 1

Глядя на спецификацию 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

Возможности разлома не являются частью "переполнения": нормальное нарушение строки не учитываются при вычислении собственных значений минимального содержания.

Это не очень понятно, но если размерные значения 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

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

Update:

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

Решение состоит в том, чтобы дублировать ваш контент и обернуть новый контент в 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/

Ответ 3

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

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

Ответ 4

Я не знаю о мобильном webkit, но это сработало в 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%;
}

Ответ 5

Мне кажется, что у 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%;
}