php - картинки - Обтекание длинного текста в CSS



обтекание div другим div (6)

На этот вопрос уже есть ответ здесь:

У меня есть текст как

<div style="float:left; width: 250px"> PellentesquePellentesquePellentesquePellentesquePellentesquePellentesquePellentesquePellentesquePellentesquePellentesquePellentesquePellentesquePellentesquePellentesquePellentesque  feugiat tempor elit. 
Ut mollis lacinia quam. Sed pharetra, augue aliquam   ornare vestibulum, metus massalaoreet tellus, eget iaculis lacus ipsum et diam. </div>

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

Спасибо за ваше время.

ОБНОВЛЕНИЕ: я могу использовать jQuery, Javascript, PHP, чтобы сделать это также. но как? Я имею в виду буквы (шрифт) не фиксированной ширины или как вы это называете.

https://src-bin.com


Answer #1

В дополнение к ответу Дурота, вы можете использовать следующий PHP-код для вставки стеснительных дефисов.

$longest_length = 15;

$string_with_long_word = 'short lonngerrrrr lonnnnnnnggeeeeeeeeeeeeeeeeeessssssssssssssssstttttttttttttt and another looooooooooooonnnnnnnnngwwooooooooororoooorrrrrd';
$string = preg_replace_callback("/[a-z0-9]{{$longest_length},}/", 'putShyHyphen', $string_with_long_word);

function putShyHyphen($matches) {
 $string = $matches[0];
 $newstring = '';
 for ($i=0; $i<strlen($string); $i++) {
  $newstring .= $string[$i] . '&shy;';
 }

 return $newstring;
}
echo $string_with_long_word . '<hr />';
echo $string;

Answer #2

Вы должны прибегнуть к JavaScript и использовать такую ​​функцию:

<script language="javascript">
function wrap() {
    var data = document.getElementsByTagName('yourtaghere'); 
    var  desiredLength = 40 ;
    var delimiter = "<br />";
    for( var i=0; i < data.length; ++i ) {
        cellLength=data[i].innerHTML.length
        if( desiredLength < cellLength ) {
            var counter=0;
            var output="";
            while( counter < cellLength ) {
                output += data[i].innerHTML.substr(counter,desiredLength) + delimiter;
                counter+= desiredLength;
            }
            data[i].innerHTML=output;
        }
    }
}
window.onload=wrap;
</script>

Или вы можете использовать hyphenator


Answer #3

Новый ответ, так как вы изменили свой вопрос:

Это очень упрощенное решение PHP:

<?php
$string = "AnExtremelyLongStringWithoutWhitespacesOrBreakpointsOfAnyKindThatWillCompletelyAndUtterlyRuinYourWebsiteDesign";
for($i=0; $i<strlen($string); $i++) {
  $newString .= $string[$i] . '&shy;';
}
echo $newString;

То же самое может быть достигнуто на любом языке, конечно.


Answer #4

Предлагаемые теги работают для разбиения действительно длинных слов (или URL), но вы получите смешанные результаты от браузера к браузеру, пытающемуся передавать текст в узких разделениях. Например, 200px div:

<div style="font-size:12px;font-family:monospace;width:200px;word-break:break-all;word-wrap:break-word;">1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890</div>

В Chrome числа ломаются, в Firefox их нет - вы получаете два столбца чисел! Кажется, Firefox не учитывает, сколько места доступно в предыдущей строке «длинного» слова - он не ломается при каждой возможности. Если это поведение когда-либо будет исправлено, я надеюсь, что Firefox также рассмотрит, как это влияет на выравнивание текста.

«Застенчивые» теги помогают Firefox, но вы все равно получаете «рваный» текст. Я не проводил обширных тестов, но кажется, что застенчивые теги создают непредсказуемые результаты (div теряют свой стиль) при использовании коротких слов (менее 8 символов) в Firefox. Я лично предпочитаю более агрессивные разрывы Chrome!


Answer #5

Так как word-wrap: break-word не работает хорошо, когда ширина не фиксирована (и даже меньше в <table> ), Stack Exchange добавляет некоторые невидимые маркеры Unicode, которые браузеры используют для поиска возможных позиций для разрывов строк. Но: эти невидимые маркеры все еще там, когда посетитель копирует текст, что может быть плохо. Более подробную информацию о Meta можно найти в https://meta.stackexchange.com/questions/170970/occasionally-the-unicode-character-sequence-u200c-u200b-zwnj-zwsp-is-insert/ .

Вместо магии Юникода вставка <span style="display: inline-block"></span> каждые несколько символов, похоже, не имеет плохого эффекта при копировании полученного текста. Это работает для меня в Chrome 25, Firefox 19, Safari 6, Internet Explorer 9 (в Windows 7 на Parallels на Mac; симуляция IE8 и IE7 тоже работает), штатного браузера и Chrome на Android 4.1 и Safari на iOS 6.1.2 и, вероятно, также поддерживается в Opera . Посмотрите этот пример JS Bin .

Когда-нибудь <wbr> будет решением, но не сегодня : хотя IE7 поддерживает его, IE8 и IE9 нет.


Answer #6

Я использую комбинацию

word-wrap: break-word;
overflow: hidden;

иметь дело с этим. Параметр word-wrap позволяет переносить слово, несмотря на его длину, в браузерах, которые поддерживают это свойство, а параметр overflow заставляет его обрезать конец доступного пространства в браузерах, которые не распознают word-wrap , Это почти так же изящно, как вы можете получить, не переходя на javascript.





css