Long text jumps to next line when finding some special characters-CodePudding

I have a simple div where I need to put an entire alphabet in a paragraph with a character divider • between characters. The problem is when the text reaches two particular characters | and ', the text breaks lines. Why and how I can fix it?

body, div, dl, dt, dd, h1, h2, h3, h4, h5, h6, p, pre, code, blockquote {
    margin:0;
    padding:0;
    border-width:0;
}


body {
}

div {width: 400px; margin: 0 auto; border:0;}

div.Marco-de-texto-b-sico {
    border-style:solid;
}
p.P-rrafo-b-sico {
    color:#000000;
    font-family:"Minion Pro", serif;
    font-size:20px;
    font-style:normal;
    font-variant:normal;
    font-weight:normal;
    line-height:1.2;
    orphans:1;
    /*page-break-after:auto;
    page-break-before:auto;
    text-align:left; widows:1;*/
    text-decoration:none;
    text-indent:0;
    text-transform:none;
    word-wrap:break-word;
}

.entrance {font-size:40px!important; margin: 4rem 0 1rem;
}


.CharOverride-1 {
    color:#cd1719;font-family:Arial, sans-serif;    font-style:normal;
font-weight:normal;
letter-spacing: 0.5rem; font-size:30px; 
    }
.CharOverride-2 {font-family:Arial, sans-serif;     font-style:normal;
font-weight:normal;
letter-spacing: 0.5rem;}
.CharOverride-3 {
    color:#cd1719;
    text-transform:uppercase;font-family:Arial, sans-serif;     font-style:normal;
font-weight:normal;
letter-spacing: 0.5rem;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" crossorigin="anonymous">


<div>
<p ><span ><i ></i></span></p>
            <p ><span >A</span><span >•</span><span >B</span><span >•</span><span >C</span><span >•</span><span >D</span><span >•</span><span >E</span><span >•</span><span >F</span><span >•</span><span >G</span><span >•</span><span >H</span><span >•</span><span >I</span><span >•</span><span >J</span><span >•</span><span >K</span><span >•</span><span >L</span><span >•</span><span >M</span><span >•</span><span >N</span><span >•</span><span >Ñ</span><span >•</span><span >O</span><span >•</span><span >P</span><span >•</span><span >Q</span><span >•</span><span >R</span><span >•</span><span >S</span><span >•</span><span >T</span><span >•</span><span >U</span><span >•</span><span >V</span><span >•</span><span >W</span><span >•</span><span >X</span><span >•</span><span >Y</span><span >•</span><span >Z</span><span >•</span><span >a</span><span >•</span><span >b</span><span >•</span><span >c</span><span >•</span><span >d</span><span >•</span><span >e</span><span >•</span><span >f</span><span >•</span><span >g</span><span >•</span><span >h</span><span >•</span><span >i</span><span >•</span><span >j</span><span >•</span><span >k</span><span >•</span><span >l</span><span >•</span><span >m</span><span >•</span><span >n</span><span >•</span><span >ñ</span><span >•</span><span >o</span><span >•</span><span >p</span><span >•</span><span >q</span><span >•</span><span >r</span><span >•</span><span >s</span><span >•</span><span >t</span><span >•</span><span >u</span><span >•</span><span >v</span><span >•</span><span >w</span><span >•</span><span >x</span><span >•</span><span >y</span><span >•</span><span >z</span><span >•</span><span >0</span><span >•</span><span >1</span><span >•</span><span >2</span><span >•</span><span >3</span><span >•</span><span >4</span><span >•</span><span >5</span><span >•</span><span >6</span><span >•</span><span >7</span><span >•</span><span >8</span><span >•</span><span >9</span><span >•</span><span >$</span><span >•</span><span >€</span><span >•</span><span >¢</span><span >•</span><span >£</span><span >•</span><span >¥</span><span >•</span><span >(</span><span >•</span><span >)</span><span >•</span><span >]</span><span >•</span><span >[</span><span >•</span><span >{</span><span >•</span><span >}</span><span >•</span><span >!</span><span >•</span><span >¡</span><span >•</span><span >¿</span><span >•</span><span >?</span><span >•</span><span >\\</span><span >•</span><span >|</span><span >•</span><span >@</span><span >•</span><span >#</span><span >•</span><span > </span><span >•</span><span >×</span><span >•</span><span >÷</span><span >•</span><span >“</span><span >•</span><span >”</span><span >•</span><span >´</span><span >•</span><span >‚</span><span >•</span><span >Ø</span><span >•</span><span >ø</span><span >•</span><span >†</span><span >•</span><span >®</span><span >•</span><span >æ</span><span >•</span><span >©</span><span >•</span><span >oe</span><span >•</span><span >™</span><span >•</span><span >ƒ</span><span >•</span><span >ª</span><span >•</span><span >Å</span><span >•</span><span >å</span><span >•</span><span >ª</span><span >•</span><span >á</span><span >•</span><span >é</span><span >•</span><span >í</span><span >•</span><span >ó</span><span >•</span><span >ú</span><span >•</span><span >à</span><span >•</span><span >è</span><span >•</span><span >ì</span><span >•</span><span >ò</span><span >•</span><span >ù</span><span >•</span><span >ä</span><span >•</span><span >ë</span><span >•</span><span >ï</span><span >•</span><span >ö</span><span >•</span><span >ü</span><span >•</span><span >â</span><span >•</span><span >ê</span><span >•</span><span >î</span><span >•</span><span >ô</span><span >•</span><span >û</span><span >•</span><span >\</span><span >•</span><span >|</span><span >•</span><span >@</span><span >•</span><span >#</span><span >•</span><span >¢</span><span >•</span><span >¬</span><span >•</span><span >÷</span><span >•</span><span >“</span><span >•</span><span >”</span><span >•</span><span >´</span><span >•</span><span >‚</span>
        <span >•</span><span >]</span><span >•</span><span >[</span><span >•</span><span >°</span><span >•</span><span >ı</span><span >•</span><span >˝</span><span >•</span><span >•</span><span >•</span><span >£</span><span >•</span><span >‰</span><span >•</span><span >⁄</span><span >•</span><span >‘</span><span >•</span><span >’</span><span >•</span><span >±</span><span >•</span><span >ˆ</span><span >•</span><span >Ø</span><span >•</span><span >‡</span><span >•</span><span >€</span><span >•</span><span >Æ</span><span >•</span><span >OE</span><span >•</span><span >Å</span><span >•</span><span >¶¯</span><span >•</span><span >ˇ</span><span >•</span><span >˜</span><span >•</span><span >«</span><span >•</span><span >»</span><span >•</span><span >—</span><span >•</span><span >…</span><span >•</span><span >°</span><span >•</span><span >˙</span><span >•</span><span >›</span><span >•</span><span >‹</span><span >•</span></p></div>

CodePudding user response：

You can fixed if you apply the wrapper of your bunch of span tags flex box. And the assign flex-wrap.

Add this class to your style:

.P-rrafo-b-sico {
  display: flex;
  flex-wrap: wrap;
}

And it will work.

body, div, dl, dt, dd, h1, h2, h3, h4, h5, h6, p, pre, code, blockquote {
    margin:0;
    padding:0;
    border-width:0;
}

.P-rrafo-b-sico {
  display: flex;
  flex-wrap: wrap;
}

body {
}

div {width: 400px; margin: 0 auto; border:0;}

div.Marco-de-texto-b-sico {
    border-style:solid;
}
p.P-rrafo-b-sico {
    color:#000000;
    font-family:"Minion Pro", serif;
    font-size:20px;
    font-style:normal;
    font-variant:normal;
    font-weight:normal;
    line-height:1.2;
    orphans:1;
    /*page-break-after:auto;
    page-break-before:auto;
    text-align:left; widows:1;*/
    text-decoration:none;
    text-indent:0;
    text-transform:none;
    word-wrap:break-word;
}

.entrance {font-size:40px!important; margin: 4rem 0 1rem;
}


.CharOverride-1 {
    color:#cd1719;font-family:Arial, sans-serif;    font-style:normal;
font-weight:normal;
letter-spacing: 0.5rem; font-size:30px; 
    }
.CharOverride-2 {font-family:Arial, sans-serif;     font-style:normal;
font-weight:normal;
letter-spacing: 0.5rem;}
.CharOverride-3 {
    color:#cd1719;
    text-transform:uppercase;font-family:Arial, sans-serif;     font-style:normal;
font-weight:normal;
letter-spacing: 0.5rem;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" crossorigin="anonymous">
<div>
<p ><span ><i ></i></span></p>
            <p ><span >A</span><span >•</span><span >B</span><span >•</span><span >C</span><span >•</span><span >D</span><span >•</span><span >E</span><span >•</span><span >F</span><span >•</span><span >G</span><span >•</span><span >H</span><span >•</span><span >I</span><span >•</span><span >J</span><span >•</span><span >K</span><span >•</span><span >L</span><span >•</span><span >M</span><span >•</span><span >N</span><span >•</span><span >Ñ</span><span >•</span><span >O</span><span >•</span><span >P</span><span >•</span><span >Q</span><span >•</span><span >R</span><span >•</span><span >S</span><span >•</span><span >T</span><span >•</span><span >U</span><span >•</span><span >V</span><span >•</span><span >W</span><span >•</span><span >X</span><span >•</span><span >Y</span><span >•</span><span >Z</span><span >•</span><span >a</span><span >•</span><span >b</span><span >•</span><span >c</span><span >•</span><span >d</span><span >•</span><span >e</span><span >•</span><span >f</span><span >•</span><span >g</span><span >•</span><span >h</span><span >•</span><span >i</span><span >•</span><span >j</span><span >•</span><span >k</span><span >•</span><span >l</span><span >•</span><span >m</span><span >•</span><span >n</span><span >•</span><span >ñ</span><span >•</span><span >o</span><span >•</span><span >p</span><span >•</span><span >q</span><span >•</span><span >r</span><span >•</span><span >s</span><span >•</span><span >t</span><span >•</span><span >u</span><span >•</span><span >v</span><span >•</span><span >w</span><span >•</span><span >x</span><span >•</span><span >y</span><span >•</span><span >z</span><span >•</span><span >0</span><span >•</span><span >1</span><span >•</span><span >2</span><span >•</span><span >3</span><span >•</span><span >4</span><span >•</span><span >5</span><span >•</span><span >6</span><span >•</span><span >7</span><span >•</span><span >8</span><span >•</span><span >9</span><span >•</span><span >$</span><span >•</span><span >€</span><span >•</span><span >¢</span><span >•</span><span >£</span><span >•</span><span >¥</span><span >•</span><span >(</span><span >•</span><span >)</span><span >•</span><span >]</span><span >•</span><span >[</span><span >•</span><span >{</span><span >•</span><span >}</span><span >•</span><span >!</span><span >•</span><span >¡</span><span >•</span><span >¿</span><span >•</span><span >?</span><span >•</span><span >\\</span><span >•</span><span >|</span><span >•</span><span >@</span><span >•</span><span >#</span><span >•</span><span > </span><span >•</span><span >×</span><span >•</span><span >÷</span><span >•</span><span >“</span><span >•</span><span >”</span><span >•</span><span >´</span><span >•</span><span >‚</span><span >•</span><span >Ø</span><span >•</span><span >ø</span><span >•</span><span >†</span><span >•</span><span >®</span><span >•</span><span >æ</span><span >•</span><span >©</span><span >•</span><span >oe</span><span >•</span><span >™</span><span >•</span><span >ƒ</span><span >•</span><span >ª</span><span >•</span><span >Å</span><span >•</span><span >å</span><span >•</span><span >ª</span><span >•</span><span >á</span><span >•</span><span >é</span><span >•</span><span >í</span><span >•</span><span >ó</span><span >•</span><span >ú</span><span >•</span><span >à</span><span >•</span><span >è</span><span >•</span><span >ì</span><span >•</span><span >ò</span><span >•</span><span >ù</span><span >•</span><span >ä</span><span >•</span><span >ë</span><span >•</span><span >ï</span><span >•</span><span >ö</span><span >•</span><span >ü</span><span >•</span><span >â</span><span >•</span><span >ê</span><span >•</span><span >î</span><span >•</span><span >ô</span><span >•</span><span >û</span><span >•</span><span >\</span><span >•</span><span >|</span><span >•</span><span >@</span><span >•</span><span >#</span><span >•</span><span >¢</span><span >•</span><span >¬</span><span >•</span><span >÷</span><span >•</span><span >“</span><span >•</span><span >”</span><span >•</span><span >´</span><span >•</span><span >‚</span>
        <span >•</span><span >]</span><span >•</span><span >[</span><span >•</span><span >°</span><span >•</span><span >ı</span><span >•</span><span >˝</span><span >•</span><span >•</span><span >•</span><span >£</span><span >•</span><span >‰</span><span >•</span><span >⁄</span><span >•</span><span >‘</span><span >•</span><span >’</span><span >•</span><span >±</span><span >•</span><span >ˆ</span><span >•</span><span >Ø</span><span >•</span><span >‡</span><span >•</span><span >€</span><span >•</span><span >Æ</span><span >•</span><span >OE</span><span >•</span><span >Å</span><span >•</span><span >¶¯</span><span >•</span><span >ˇ</span><span >•</span><span >˜</span><span >•</span><span >«</span><span >•</span><span >»</span><span >•</span><span >—</span><span >•</span><span >…</span><span >•</span><span >°</span><span >•</span><span >˙</span><span >•</span><span >›</span><span >•</span><span >‹</span><span >•</span></p></div>

Return to post

CodePudding user response：

What you want is white-space: nowrap;.

It's confusing, but this white-space CSS property very important to controlling word wrap, which you'd think word-wrap by itself would take care of.