Span öğesinin satır kesmesini önle

<span>Satır sonu olmadan görüntülemek istediğim bir öğe var . Bunu nasıl yapabilirim?

Bunu CSS'nize ekleyin:

white-space:nowrap;

Daha fazla bilgiyi buradan edinebilirsiniz: http://www.w3.org/wiki/CSS/Properties/white-space

white-space

white-spaceMülkiyet öğesi içinde beyaz boşluk nasıl işleneceğini beyan eder.

Değerler

normal Bu değer, kullanıcı aracılarını beyaz boşluk dizilerini daraltmaya ve satır kutularını doldurmak için gereken satırları kesmeye yönlendirir.

pre Bu değer, kullanıcı aracılarının beyaz boşluk dizilerini daralmasını önler. Satırlar yalnızca kaynaktaki yeni satırlarda veya oluşturulan içerikte "\ A" oluşumlarında kesilir.

nowrap Bu değer, 'normal' için olduğu gibi beyaz boşluğu daraltır, ancak metin içindeki satır sonlarını bastırır.

pre-wrap Bu değer, kullanıcı aracılarının beyaz boşluk dizilerini daralmasını önler. Satırlar kaynaktaki yeni satırlarda, oluşturulan içerikte "\ A" oluşumlarında ve gerektiğinde satır kutularını doldurmak için kesilir.

pre-line Bu değer, kullanıcı aracılarını beyaz boşluk dizilerini daraltmaya yönlendirir. Satırlar kaynaktaki yeni satırlarda, oluşturulan içerikte "\ A" oluşumlarında ve gerektiğinde satır kutularını doldurmak için kesilir.

inherit Öğenin üst öğesinin özelliği ile aynı değeri alır.

Yalnızca boşluk karakterlerinde satır sonlarını önlemeniz gerekiyorsa,  kelimeler arasında objeleri kullanabilirsiniz :

No line break

onun yerine

<span style="white-space:nowrap">No line break</span>

white-space: nowrapdoğru çözümdür, ancak bir çizgide herhangi bir kırılmayı önler. Yalnızca iki öğe arasındaki satır sonlarını önlemek istiyorsanız, biraz daha karmaşık hale gelir:

<p>
    <span class="text">Some text</span>
    <span class="icon"></span>
</p>

Açıklıklar arasındaki kopmaları önlemek, ancak "Bazı" ve "metin" arasındaki kopmalara izin vermek için şu işlemleri yapabilirsiniz:

p {
    white-space: nowrap;
}

.text {
    white-space: normal;
}

Bu Firefox için yeterince iyi. Chrome'da ek olarak, açıklıklar arasındaki boşluğu bir ile değiştirmeniz gerekir  . (Boşluğu kaldırmak işe yaramaz.)

Bootstrap 4 Sınıfı ile:

text-nowrap

Ref: https://getbootstrap.com/docs/4.0/utilities/text/#text-wrapping-and-overflow