使用php代码段防止html中的换行符

Question

我有一个html站点，它用php获取一些文本片段。我无法控制这些代码段的长度，但希望保留我的格式。

我更希望通过php插入的文本不完全可见，而不是具有换行符。我假设有一个简单的css解决方案，我只是不知道要搜索什么。我在另一方面遇到过好几次这个问题，但都找不到出现问题的代码。

<div class="col-4">
   {some PHP code that receives information}
</div>

输出： Lorem ipsum dolor sit amet， consetetur sadipscing elitr， sed diam nonumy eirmod temor invidunt ut labore et dolore magna aliquyam erat， sed diam volptua。

预期产出：Lorem ipsum dolor sit amet，consetetur sa

其余文本应在html文件中，但不可见，不能计数字符。溢出div容器的边界是可以的。

Answer 1

由于您不知道内容会持续多长时间，您可以将文本溢出：省略号与空白：nowrap结合使用，以解决您的问题

如果文本超出div边界，则始终可见

您可以使用溢出：隐藏。当所有这些结合在一起。你会得到这个

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>

Answer 2

我现在的解决方案只是两行简单的css

空白：nowrap；浮动：初始；

我唯一仍然缺少的是，如果文本到达div边界，它总是可见的。也许有人知道一个诀窍，但这并不紧急。。。

Answer 3

我为您的问题编写了js脚本。试着理解它，但如果你有问题，只需在评论中提问即可。

$(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>