prevent linebreaks in html with php snippets

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.

"counting characters is no option." - because? Please add your code so we can see the context and can help you better. Also, if you have restrictions, like counting chars, please state why you have those restrictions. That also helps us if we're going to recommend some solution. — M. Eriksson
– M. Eriksson, Commented Sep 12, 2019 at 14:08
counting chars is no option because letterspacing is not the same throughout all chars. Example (each 20 chars) iiiiiiiiiiiiiiiiiiii wwwwwwwwwwwwwwwwwwww And giving you code (I have no access to it at the moment) would probably not help much either because I am looking for a css solution, preferably to use in a span-tag Drawing an image would probably help most... — Georg
– Georg, Commented Sep 12, 2019 at 14:41
Fair enough. For the future, only add the tags that are relevant to the question. I've removed the PHP tag since you want a CSS-solution. You should still add your code though. — M. Eriksson
– M. Eriksson, Commented Sep 12, 2019 at 15:22
You may find something of use here: paulbakaus.com/tutorials/css/… — BugsArePeopleToo
– BugsArePeopleToo, Commented Sep 12, 2019 at 16:44
Thanks for your answers, as @Magnus said i should have left the php tag away... I was looking for a css only solution to keep it as clean and easy as possible — Georg
– Georg, Commented Sep 13, 2019 at 6:42

FadedForEver · Accepted Answer · 2019-09-12 15:49:00Z

0

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>

answered Sep 12, 2019 at 15:49

FadedForEver

14410 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Georg Over a year ago

thank you for your effort, in the meantime i more or less found what I was after in css (white-space: nowrap; float: initial;). Since it works for me Im going to use my solution instead of implementing a js script, looks good/functional btw.

Georg · Accepted Answer · 2019-09-13 06:51:25Z

0

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...

answered Sep 13, 2019 at 6:51

Georg

231 silver badge5 bronze badges

Comments

Viira · Accepted Answer · 2021-09-28 07:23:19Z

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>

Collectives™ on Stack Overflow

prevent linebreaks in html with php snippets

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related