Не нарушая длинное слово

Question

Пожалуйста, не забудьте добавить уязвимый контент, как показано ниже.

jffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj

У меня есть многострочный текстовый редактор html (крошечный mce). Когда пользователь вводит неуместные слова, как я ввел выше !. Он будет правильно сохранен в базе данных. Когда я пытаюсь отобразить те же данные, используя метку. Отображаемые данные нарушают дизайн страницы.

Как я могу исправить эту проблему? Пожалуйста, предоставьте мне решение для этого.

Заранее спасибо С Уважением, Мадху Б.Н.

Answer 1

Если речь идет о нарушении дизайна страницы при повторном отображении пользовательского ввода, и если ввод "неуместен", тогда примените стиль CSS, чтобы обрезать его, используя overflow: hidden .

<style> 
    .fixed { overflow:hidden; }
</style>

Затем примените его к div или контейнеру:

<div class="fixed" style="width:100px">The following input is really long and invalid. 

fffffffffffffffffffffffffffffffffffffffffffffffffffffjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj

jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj</div>

Это гарантирует, что макет страницы не будет нарушен. В приведенном выше примере 100px соблюдается независимо от длины недопустимого текста.

редактирует:

Если вы хотите использовать режим переноса, попробуйте использовать CSS word-wrap: break-word;

<style>
.fixed {
    word-wrap: break-word;
}
</style>

Или даже соедините их вместе, чтобы обеспечить безопасность в браузерах.

<style> 
    .fixed { 
        overflow:hidden; 
        word-wrap: break-word;
    }
</style>

Answer 2

Это кросс-браузерное решение, которое я недавно рассматривал, которое работает на клиенте и использует jQuery:

(function($) {
  $.fn.breakWords = function() {
    this.each(function() {
      if(this.nodeType !== 1) { return; }

      if(this.currentStyle && typeof this.currentStyle.wordBreak === 'string') {
        //Lazy Function Definition Pattern, Peter's Blog
        //From http://peter.michaux.ca/article/3556
        this.runtimeStyle.wordBreak = 'break-all';
      }
      else if(document.createTreeWalker) {

        //Faster Trim in Javascript, Flagrant Badassery
        //http://blog.stevenlevithan.com/archives/faster-trim-javascript

        var trim = function(str) {
          str = str.replace(/^\s\s*/, '');
          var ws = /\s/,
          i = str.length;
          while (ws.test(str.charAt(--i)));
          return str.slice(0, i + 1);
        };

        //Lazy Function Definition Pattern, Peter's Blog
        //From http://peter.michaux.ca/article/3556

        //For Opera, Safari, and Firefox
        var dWalker = document.createTreeWalker(this, NodeFilter.SHOW_TEXT, null, false);
        var node,s,c = String.fromCharCode('8203');
        while (dWalker.nextNode()) {
          node = dWalker.currentNode;
          //we need to trim String otherwise Firefox will display
          //incorect text-indent with space characters
          s = trim( node.nodeValue ).split('').join(c);
          node.nodeValue = s;
        }
      }
    });

    return this;
  };
})(jQuery);

Answer 3

Попробуйте вставить ­ в строку. Это HTML-элемент для " мягкого дефиса ".

При использовании PHP print(wordwrap($string, 75, '­'));

Подробнее о SO: Мягкий дефис в HTML ( против & shy;)

Answer 4

Если вы используете PHP для распечатки текста, проверьте функцию wordwrap .

Answer 5

Это можно исправить с помощью небольшого CSS, используя overflow-x (множество интересных примеров после ссылки) .

Просто убедитесь, что вы указали ширину, иначе overflow-x вам не поможет.

Попробуйте здесь

<style>
div{
  width: 105px;
  overflow-x: hidden;
  float: left;
  margin: 10px;
  padding: 4px;
  background: orange;
}
</style>
<div>WAYTOOLONGTOBESHOWN</div>
<div>WAYTOOLONGTOBESHOWN</div>

Answer 6

Вы можете использовать InsertAt несколько раз для достижения решения @ Ryan, или вы можете выполнить проверку, чтобы предотвратить попадание таких искаженных данных в базу данных.

Регулярные выражения также сделают это доступным для ввода мягкого дефиса.

Answer 7

В javascript добавьте \ u200b - пространство нулевой ширины перед его отображением

YOURTEXT=YOURTEXT.replace(/(.)/g,"\u200b$1");