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

ProgramBox

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

Post author:admin
Запись опубликована:11 марта, 2023
Post category:Вопросы по программированию

#css #webkit #word-break

#css #webkit #разрыв слова

Вопрос:

Я пытаюсь определить, возможно ли создать 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 display:inline-block или display:table, красный внешний div правильно расширяется, чтобы включить содержимое, но URL-адрес не прерывается, если окно уже URL-адреса.

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

1. Я ищу решение только для css или доказательство того, что такое решение невозможно.

2. Не уверен, что это то, что вы ищете, но вы действительно можете убедиться, что разрыв всегда происходит с помощью свойства CSS word-break . Проверьте этот JSFiddle

3. Дайте изображение того, что вы хотите.

Ответ №1:

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

Обновить:

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

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

1. Спасибо за предложение. К сожалению, прокрутка div не работает на мобильном webkit. Я мог бы использовать библиотеку js, такую как iScroll, для выполнения собственной прокрутки, но это не совсем то, что я хочу, поскольку я бы предпочел, чтобы прокручивалась вся страница, а не только div.

2. Ваше обновление — это своего рода классная идея. Я пытался придумать какой-нибудь способ сделать это с дублированным содержимым. Я не буду использовать это, но это заслуживает награды.

3. Я согласен с Алексом (и я рад, что он признал вас за это), ваше решение продемонстрировало изобретательность. Конечно, есть проблемы (с поисковой системой) с дублированием содержимого, но это интересное решение.

Ответ №2:

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

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

1. Вот скрипка: jsfiddle.net/hgLbh @AlexM display:inline-block; не ограничивал ширину таблицы. Переполненный якорь привел к расширению фона, что сделало таблицу без упаковки визуально незаметной.

2. Я не могу контролировать пользовательский контент, который включает таблицу. Я добавил тег <img> выше в качестве примера другого элемента, который переполняет родительский.

Ответ №3:

Я не знаю о мобильном 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%;
}

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

2. затем опубликуйте изображение предполагаемого макета

Ответ №4:

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

Ответ №5:

Глядя на спецификацию 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: обычный’ разрыв строки, не учитываются при вычислении внутренних размеров ‘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';
  }
}

1. Конечно, решение javascript простое, но вы сказали в своем сообщении, что это неприемлемо. В любом случае, я обновил свой ответ рабочим примером (хотя он и хакерский) без Javascript.

2. На случай, если кому-то интересно, word-wrap недавно был переименован в overflow-wrap , отсюда и расхождение между черновиком 2010 года и последним черновиком. Оба имени свойств являются псевдонимами и используют один и тот же набор значений и правил рендеринга.