Скажем, у меня есть столбец с шириной не более 20 пикселей, и мне нужно обернуть содержимое в пределах данной ширины

Question

если у меня длинный текст с / или некоторыми другими escape-последовательностями, как это сломать и отобразить в UI /?.

образец I / p: Добро пожаловать / Программирование если у меня есть длинный текст с / или некоторыми другими escape-последовательностями, как это сломать и отобразить в UI /?.

column1
{
  width:50px;
  word-wrap: break-word;(or) overflow-wrap :break-word (or)
  word-break: break-all;
}

ожидаемый o / p: значение должно находиться в пределах заданной ширины

Welcome
To/
Programming

но отображается как

Welcome
To/Prog
mming

Answer 1

Может быть, вы можете сделать это, немного изменив свою разметку и CSS, вы можете использовать псевдоэлемент ::before и сказать вашему тексту разрыв в определенном месте, установив для содержимого псевдоэлемента значение "\A"

.column1
{
  width:50px;
  word-wrap: break-word;
}

.column2
{
  width:50px;
  margin-top: 20px;
}

.break:before {
    content:"\A";
    white-space:pre;
}

<div class="column1">
  Welcome To/ Programming
</div>

<div class="column2">
  <span>Welcome</span><span class="break">To/</span><span class="break">Programming</span>
</div>