使用 php 片段防止 html 中的换行符答案

【问题标题】：prevent linebreaks in html with php snippets使用 php 片段防止 html 中的换行符
【发布时间】：2020-01-14 10:25:59
【问题描述】：

我有一个 html 网站，它使用 php 获取一些 textsn-ps。我无法控制这些 sn-ps 的时间长度，但我想保留我的格式。

我宁愿希望通过 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 tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua。

预期输出： Lorem ipsum dolor sit amet, consetetur sa

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

【问题讨论】：

“计算字符是不行的。” - 因为？请添加您的代码，以便我们查看上下文并为您提供更好的帮助。此外，如果您有限制，例如计数字符，请说明为什么您有这些限制。如果我们要推荐一些解决方案，这也会对我们有所帮助。
计算字符不是选项，因为所有字符的字母间距都不相同。示例（每 20 个字符） iiiiiiiiiiiiiiiiiiiii wwwwwwwwwwwwwwwwwwww 给你代码（我目前无权访问它）可能也无济于事，因为我正在寻找一个 css 解决方案，最好在跨度标签中使用绘制图像会可能最有帮助...
很公平。对于未来，只添加与问题相关的标签。因为您需要 CSS 解决方案，所以我删除了 PHP 标记。你仍然应该添加你的代码。
你可以在这里找到一些有用的东西：paulbakaus.com/tutorials/css/…
感谢您的回答，正如@Magnus 所说，我应该把 php 标签放在一边……我正在寻找一种仅使用 css 的解决方案，以使其尽可能干净和简单

标签： html css

【解决方案1】：

我为您的问题编写了 js 脚本。尝试理解它，但如果您有问题，请在 cmets 中提问。

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

【讨论】：

感谢您的努力，与此同时，我或多或少地找到了我在 css 中所追求的东西（空白：nowrap；浮动：初始；）。因为它对我有用，所以我将使用我的解决方案而不是实现 js 脚本，看起来不错/功能不错。

【解决方案2】：

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

空白：nowrap；浮动：初始；

我唯一仍然缺少的是文本在超出 div 边界时始终可见。也许有人知道一个技巧，但这并不紧急......

【讨论】：

【解决方案3】：

由于您不知道内容会持续多久，您或许可以使用text-overflow:ellipsis 和white-space:nowrap 来解决您的问题

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

您可以使用overflow:hidden。当这一切结合在一起时。你会得到这个

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>

【讨论】：