Как предотвратить переполнение слов при клонировании и переносе строк? - PullRequest
Новая
       8

Как предотвратить переполнение слов при клонировании и переносе строк?

0 голосов
/ 20 февраля 2020

У меня проблема с примером кодирования, который я нашел в Обернуть каждую строку абзаца в промежуток . По сути, он клонирует текст в div и выводит текст, заключенный в span, в другой div.

У меня проблема в том, что в процессе клонирования слова обрезаются, потому что длина слова превышает ширина, установленная в CSS.

Пример: 

<span>I’m up to something. Learning is cool, bu</span>
<span>t knowing is better, and I know the key t</span>

Есть ли способ заставить слова не переполняться? Я попытался установить переполнение: авто в css, и он не распознает его. 

function trimByPixel(str, width) {
  var spn = $('<span style="visibility:hidden"></span>').text(str).appendTo('body');
  var txt = str;
  while (spn.width() > width) { txt = txt.slice(0, -1); spn.text(txt + "..."); }
  return txt;
}

var stri = $(".str").text();

function run(){
var s = trimByPixel(stri, $(".str").width()).trim()
stri = stri.replace(s,"")
$(".result").append("<span>"+s+"</span>");

if(stri.trim().length > 0){
  run();
}
}

run();
$(".str").remove().delay(10);
.str{
  width:300px;
  }
  
  .result span{
  display:block
  }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="str"> 
I’m up to something. Learning is cool, but knowing is better, and I know the key to success. Bless up. They never said winning was easy. Some people can’t handle success, I can. 
I told you all this before, when you have a swimming pool, do not use chlorine, use salt water, the healing, salt water is the healing. Put it this way, it took me twenty five years to get these plants, twenty five years of blood sweat and tears, and I’m never giving up, I’m just getting started.                                                         
</div>
<div class="result"></div>

1 Ответ

1 голос
/ 20 февраля 2020

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

Чтобы узнать, собираемся отрезать слово, мы можем проверить, каким символом является последний символ в строке. Таким образом, для простоты мы можем проверить, является ли это пустым пространством, и в случае, если это так, отсечение - это хорошо. Более сложный тест мог бы проверить, является ли это символ от az AZ 0-9. 

while (spn.width() > width || txt.charAt(txt.length-1)!=" ")
...