段落文本为单行,仅显示最后一个字符

时间:2019-03-12 05:41:06

标签: html css user-interface user-experience

在我的程序中,我添加了将段落文本限制为CSS中单行显示的方式。

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

但是它仅显示首字母。我想在段落溢出时显示该段落的最后一个单词。

原始文本:

基于模式的写作的目的:快速简便的作文旨在快速轻松地教给学生如何组织信息并阐明要点。

当前输出:

基于模式的写作的目的:快速简便的作文是为了快速,轻松地教授学员。

预期输出:

随笔是为了快速,轻松地教给学生如何组织信息和阐明要点。

如何使用CSS实现此目标?

1 个答案:

答案 0 :(得分:1)

Text-overflow ellipsis on left side重复

HTML:

<p><bdi>The purpose of Pattern Based Writing: Quick & Easy Essay is to quickly and easily teach students how to organize information and make points clear.</bdi></p>

CSS:

p {  
  white-space: nowrap;                   
  overflow: hidden;
  text-overflow: ellipsis;  
  width:550px;
  direction:rtl;
  text-align:left;
}