Home / Questions / 4829
Accepted
devconcept
Asked: 2020-02-27 07:38:33 +0800 CST 2020-02-27 07:38:33 +0800 CST

如何在 HTML 中的单行上输出文本？

  • 772

我有一种情况，我想显示一个占据其容器整个宽度并且不超过一行的文本，但如果它有行分隔符，它不会显示连续的行。

我在纯 CSS 中尝试了以下代码：

.line-container {
  width: 230px;
  height: 20px;
}
.single-line {
  width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
<div class="line-container">
  <div class="single-line">Lorem
    ipsum dolor amet Lorem ipsum dolor amet Lorem ipsum dolor
    amet Lorem ipsum dolor amet Lorem ipsum 
    dolor amet Lorem ipsum dolor amet Lorem ipsum dolor amet Lorem ipsum dolor amet
  Lorem ipsum dolor amet Lorem ipsum dolor amet</div>
</div>

white-space这可以正常工作，但前提是在设置为nowrap删除换行符时没有换行符作为属性。其他可能的值normal、pre和pre-wrap并pre-line没有太大帮助，因为当时文本没有在 1 行上输出。

我还读到有几种方法可以在以下链接中使用字符 \r 和 \n （换行符和换行符）来解释新行的存在：

\r 和 \n 有什么区别

https://es.wikipedia.org/wiki/New_Line

我想如果我从数据库或文件中读取文本并从服务器接收它，如果它是在不同的操作系统中编写的，这会给我带来很多不便。

是否有我不知道的 CSS 解决方案，或者我应该使用 javascript 片段来创建一个组件，就像我向您展示的那样？

javascript

3 Answers

  1. Best Answer

    我终于得到了我想要的。我不必使用 javascript，只需使用 CSS。

    通过这种方式，我能够为任何环境实现可移植的解决方案，并且根据规范，它甚至可以在 Internet Explorer 6 中工作。

    事实证明，white-space当设置为preif 时，该属性会保留换行符，它甚至会在遇到元素时考虑在内，<br/>但它确实会产生这种有趣的效果。

    $(function() {
  var textoLargo = 'Lorem ipsum dolor amet ipsum dolor amet ipsum dolor amet ipsum dolor amet\r\n' +
    'ipsum dolor\r\n' +
    'amet Lorem ipsum dolor amet Lorem ipsum\n' +
    'dolor amet Lorem ipsum dolor amet Lorem ipsum dolor amet Lorem ipsum dolor amet\r' +
    'Lorem ipsum dolor amet Lorem ipsum dolor amet\n';
  $('#empty').html(textoLargo);
});
    .line-container {
  width: 200px;
  height: 20px;
}
.single-line {
  width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: pre;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>Probando distintos separadores</h3>
<div class="line-container">
  <div id="empty" class="single-line">
  </div>
</div>
<h3 style="margin-top: 100px">Usando elementos br como separadores</h3>
<div class="line-container">
  <div class="single-line">Lorem ipsum dolor amet Lorem ipsum dolor amet Lorem ipsum dolor amet
    <br/>Lorem ipsum
    <br/>Lorem ipsum dolor amet Lorem ipsum dolor amet Lorem ipsum dolor amet
    <br/>
  </div>
</div>

    它所做的是创建小的文本片段。当属性text-overflow设置为它时，它会ellipsis剪切超出其容器大小的文本，因此需要overflow: hidden;与属性结合使用，以便在文本较大的情况下white-space显示省略号。...

    overflow: hidden;到达那里我只需要在容器上再应用一个就可以了！

    $(function() {
  var textoLargo = 'Lorem ipsum dolor amet Lorem ipsum dolor amet Lorem ipsum dolor amet\r\n' +
    'ipsum dolor amet Lorem ipsum dolor amet Lorem ipsum dolor\r\n' +
    'amet Lorem ipsum dolor amet Lorem ipsum\n' +
    'dolor amet Lorem ipsum dolor amet Lorem ipsum dolor amet Lorem ipsum dolor amet\r' +
    'Lorem ipsum dolor amet Lorem ipsum dolor amet\n';
  var primeraLineaCorta = 'Lorem ipsum dolor \r\n' +
    'ipsum dolor amet Lorem ipsum dolor amet Lorem ipsum dolor\r\n' +
    'amet Lorem ipsum dolor amet Lorem ipsum\n' +
    'dolor amet Lorem ipsum dolor amet Lorem ipsum dolor amet Lorem ipsum dolor amet\r' +
    'Lorem ipsum dolor amet Lorem ipsum dolor amet\n';
  $('#long').html(textoLargo);
  $('#short').html(primeraLineaCorta);
});
    .line-container {
  width: 200px;
  height: 20px;
  overflow: hidden;
}
.single-line {
  width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: pre;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<h3>Probando distintos separadores</h3>
<div class="line-container">
  <div id="long" class="single-line">
  </div>
</div>
<h3 style="margin-top: 30px">Si el texto es mas pequeño</h3>
<div class="line-container">
  <div id="short" class="single-line">
  </div>
</div>
<h3 style="margin-top: 30px">Si se usa br como separador</h3>
<div class="line-container">
  <div id="short" class="single-line">Lorem ipsum dolor amet Lorem ipsum dolor amet Lorem ipsum dolor amet
    <br/>Lorem ipsum
    <br/>Lorem ipsum dolor amet Lorem ipsum dolor amet
    <br/>Lorem ipsum dolor amet Lorem ipsum dolor amet
    <br/>
  </div>
</div>
<h3 style="margin-top: 30px">Si se usa br y el texto es pequeño</h3>
<div class="line-container">
  <div id="short" class="single-line">Lorem ipsum dolor
    <br/>
  </div>
</div>

    只需要使用这个小的 css 片段来实现它

    .line-container {
    width: 200px;
    height: 20px;
    overflow: hidden;
}

.single-line {
    width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: pre;
}

    注意：根据属性的文档，此解决方案仅用作分隔符white-space时不起作用。\r根据仅适用于旧 Mac的 SO 文章，我认为这是完全可以接受的。\r如果是这种情况，则必须使用javascript替换返回字符\n才能达到此效果。

    • 10

  2. 包含显示文本的div的父div，大小固定，不允许文本正确显示，淘汰类.line-container

    <style>
.single-line {
  width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
</style>
<div class="line-container">
<div class="single-line" >Lorem
    ipsum dolor amet Lorem ipsum dolor amet Lorem ipsum dolor
    amet Lorem ipsum dolor amet Lorem ipsum 
    dolor amet Lorem ipsum dolor amet Lorem ipsum dolor amet Lorem ipsum dolor amet
  Lorem ipsum dolor amet Lorem ipsum dolor amet</div>
</div>

    在此处查看在线示例

    我还告诉您，如果您的文本有换行符或换行符，您可以通过 Javascript 过滤那些不可打印的字符，例如：

    var s = "Lorem \n  ipsum dolor amet Lorem ipsum dolor amet Lorem ipsum dolor \n amet Lorem ipsum dolor amet Lorem ipsum \n dolor amet Lorem ipsum dolor amet Lorem ipsum dolor amet Lorem\n ipsum dolor amet";

    使用此正则表达式和 replace() 方法，您可以删除换行符并返回：

    s = s.replace(/[\n\r]/g, '');
    • 1

  3. 你应该添加一个"<br/>"你想要换行的地方

    原因是 html 没有将 "enter" 解释为换行符 =)

    • 0