prevent linebreaks in html with php snippets - html

Question

I have a html site which gets some textsnippets with php. I can not control how long those snippets are but want to keep my formatting.
I rather want that the text which is inserted via php not completely visible than have linebreaks. I assume there is a simple css solution to this, i just don't know what to search for. I had that problem several times the other way around, but cant find the code where it occured.
<div class="col-4">
{some PHP code that receives information}
</div>
Output:
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Expected Output:
Lorem ipsum dolor sit amet, consetetur sa
The rest of the text should be in the html file but not be visible, counting characters is no option. Overflowing the boundaries of the div container is ok.

Answer 1

i wrote js script for your issue. try to understand it but if you have question, just ask in comments.
$(document).ready(function(){
var fulltext = $('#text').text();//change #text to your elements id or class
var nof = 3; //number of charachter from start , starts from 1
var removedText = fulltext.slice(nof,fulltext.length);
//slice nof to end to hide it
var selectedText = fulltext.slice(0,nof);
$('#text').text(selectedText);
$('#text').append('<p style="visibility:hidden">'+removedText+'</p>')
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="parent"style="background-color:#ffffff">
<h1 id="text">HelloWorld</h1>
</div>

Answer 2

My solution for now are just two simple css lines
white-space: nowrap;
float: initial;
The only thing i am still missing is that the text is always visible if it reaches over the div boundaries. Maybe someone knows a trick to that but this is no urgent...

Answer 3

Since you don't know how long the content would be you could perhaps use text-overflow:ellipsis combined with white-space:nowrap and for your problem
the text is always visible if it reaches over the div boundaries
you could use overflow:hidden. When all this combined together. You'll get this
div {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
max-width: 300px;
margin auto;
}
<div class="col-4">
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</div>