使用HTML/CSS限制句子的长度

我从一个JSON文件中调用几个句子，并将其附加到一个

标记中

    <p>
       Thank you all for another magical night spent together 
       this last sunday at The Hippodrome in Baltimore.Thank yo...
    <p>

谢谢大家，我们又度过了一个神奇的夜晚
上周日在巴尔的摩的竞技场谢谢你。。。

我想缩短它，即使它在json中已经被缩短了，我能使用纯css或html来限制它的长度吗

我不需要任何javascript/Jquery建议因为如果使用javascirpt很容易完成这项任务，我可能只需要使用dom，但在这种情况下，我想看看是否有任何纯html和css方法可以做到这一点

更新1：

---

每个人都建议我使用

空白：nowrap

将句子转换为一行，然后通过设置

文本溢出：省略号将隐藏文本转换为一行，但有一个限制，html只能显示一行。是否还有其他行显示？
您也可以用作链接

您也可以将其用作链接

使用以下示例：

<p style="width: 150px;height: 15px;overflow: hidden;">
   Thank you all for another magical night spent together 
   this last sunday at The Hippodrome in Baltimore.Thank yo...
</p>


谢谢大家，我们又度过了一个神奇的夜晚
上周日在巴尔的摩的竞技场谢谢你。。。

使用以下示例：

<p style="width: 150px;height: 15px;overflow: hidden;">
   Thank you all for another magical night spent together 
   this last sunday at The Hippodrome in Baltimore.Thank yo...
</p>


谢谢大家，我们又度过了一个神奇的夜晚
上周日在巴尔的摩的竞技场谢谢你。。。

CSS和HTML无法获取句子的长度。所以，我们并没有CSS的限制，HTML不能得到句子的长度。所以，不能设置句子的长度限制。但若你们想用CSS来截短一行具有最大元素宽度的句子。你可以做：

p {
 max-width: 100px;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}

CSS和HTML无法获取句子的长度。所以，我们并没有CSS的限制，HTML不能得到句子的长度。所以，不能设置句子的长度限制。但若你们想用CSS来截短一行具有最大元素宽度的句子。你可以做：

p {
 max-width: 100px;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}

您需要使用CSS截断文本，从外观上看，您需要在结尾处正确截断的多行文本框（Anubhav的答案是单行的）。因为不存在（我知道）纯css选项来处理这个问题，所以您可能需要一个jQuery插件，比如clamp.js或类似的插件

您可能想要的答案来自另一个SO线程，如下所示：

编辑：这里还有一个相当复杂的CSS解决方案：虽然我觉得这是一个有点黑客攻击的解决方案。
你会想用CSS截断文本，从外观上看，你希望多行文本框在结尾正确截断（Anubhav的答案是单行的）。因为不存在（我知道）纯css选项来处理这个问题，所以您可能需要一个jQuery插件，比如clamp.js或类似的插件

您可能想要的答案来自另一个SO线程，如下所示：

编辑：这里还有一个相当复杂的CSS解决方案：尽管我觉得这是一个有点黑客攻击的解决方案。
您可以使用
文本溢出：省略号取而代之。请阅读下面的例子

<div id="readmore">Thank you all for another magical night spent together 
       this last sunday at The Hippodrome in Baltimore.
</div>

有关更多信息，请通过此
您可以使用
文本溢出：省略号取而代之。请阅读下面的例子

<div id="readmore">Thank you all for another magical night spent together 
       this last sunday at The Hippodrome in Baltimore.
</div>

有关更多信息，请通过此
如果您是单行，请使用
文本溢出：省略号
属性实现单行文本以显示省略号（溢出
…
）。当然，有些浏览器还需要添加
width
属性

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

如果是多行，请使用WebKit CSS扩展属性（WebKit是私有属性）
-WebKit line clamp。注意：WebKit浏览器或移动终端（大多数是基于WebKit的浏览器）页面很容易在中实现：这是一个非标准属性（不受支持的WebKit属性），未出现在CSS规范草案中。
-webkit line clamp
用于限制块元素显示的文本中的行数。为了实现这种效果，需要将它与其他WebKit属性结合起来。
通用绑定属性：

overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

如果是单行，请使用
文本溢出：省略号
属性实现单行文本以显示省略号（溢出
…
）。当然，有些浏览器还需要添加
width
属性

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

如果是多行，请使用WebKit CSS扩展属性（WebKit是私有属性）
-WebKit line clamp。注意：WebKit浏览器或移动终端（大多数是基于WebKit的浏览器）页面很容易在中实现：这是一个非标准属性（不受支持的WebKit属性），未出现在CSS规范草案中。
-webkit line clamp
用于限制块元素显示的文本中的行数。为了实现这种效果，需要将它与其他WebKit属性结合起来。
通用绑定属性：

overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;