Как не дать длинным словам сломать мой div?

Question

После перехода с TABLE-макета на DIV-макет остается одна общая проблема:

ПРОБЛЕМА : вы заполняете свой DIV динамическим текстом, и неизбежно появляется сверхдлинное слово, которое простирается через край столбца div и делает ваш сайт непрофессиональным.

RETRO-WHINING : Это никогда не происходило с макетами таблиц. Ячейка таблицы всегда будет расширяться до ширины самого длинного слова.

SEVERITY : я вижу эту проблему даже на самых крупных сайтах, особенно на немецких сайтах, где даже такие распространенные слова, как «ограничение скорости», очень длинные («Geschwindigkeitsbegrenzung»).

У кого-нибудь есть работоспособное решение этой проблемы?

Answer 1

Если у вас есть это -

  <style type="text/css">
      .cell {
            float: left;
            width: 100px;
            border: 1px solid;
            line-height: 1em;
      }
  </style>

  <div class="cell">TopLeft</div>
  <div class="cell">TopMiddlePlusSomeOtherTextWhichMakesItToLong</div>
  <div class="cell">TopRight</div>
  <br/>
  <div class="cell">BottomLeft</div>
  <div class="cell">BottomMiddle</div>
  <div class="cell">bottomRight</div>

просто переключитесь на вертикальный формат с содержимым div и используйте min-width в вашем CSS вместо width -

  <style type="text/css">
      .column {
            float: left;
            min-width: 100px;
      }
      .cell2 {
            border: 1px solid;
            line-height: 1em;
      }
  </style>

  <div class="column">
      <div class="cell2">TopLeft</div>
      <div class="cell2">BottomLeft</div>
  </div>
  <div class="column">
      <div class="cell2">TopMiddlePlusSomeOtherTextWhichMakesItToLong</div>
      <div class="cell2">BottomMiddle</div>
  </div>
  <div class="column">
      <div class="cell2">TopRight</div>
      <div class="cell2">bottomRight</div>
  </div>
  <br/>

Конечно, если вы отображаете подлинные табличные данные, то можно использовать реальную таблицу, так как она семантически верна и будет информировать людей, использующих программы чтения с экрана, которые должны находиться в таблице. Они используют их для общего макета или нарезки изображений, за которые люди будут линчевать.

Answer 2

Я написал функцию, которая прекрасно работает, где она вставляет ­ x букв в слово для хорошего разрыва строки. Все ответы здесь не поддерживают все браузеры и устройства, но это хорошо работает с использованием PHP:

/**
 * Add line-break to text x characters in
 * @param  string  $text          
 * @param  integer $characters_in 
 * @return string                 
 */
function line_break_text($text, $characters_in = 10) {

    $split = explode(' ', $text);

    if ( ! empty($split)) {

        foreach ($split as $key => $var) {

            if ( strlen($var) > $characters_in ) {

                $split[$key] = substr_replace($var, '­', $characters_in, 0);

            }

        }

    }

    return implode(' ', $split);

}

Answer 3

Добавьте это к css вашего div: word-wrap: break-word;

Answer 4

Простая функция (требуется underscore.js) - на основе ответа @porneL

    String.prototype.shyBreakString = function(maxLength) {
        var shystring = [];
        _.each(this.split(' '), function(word){
            shystring.push(_.chop(word, maxLength).join('­'));
        });
        return shystring.join(' ');
    };

Answer 5

после того, как все слова обертываются и ломаются, сохраните переполнение и посмотрите, решит ли это вашу проблему. просто измените отображение вашего div на: display: inline;

Answer 6

«Word-Wrap: Break-Word» работает в Firefox 3.5 http://hacks.mozilla.org/2009/06/word-wrap/