【问题标题】:Paragraph text to single line and display only last characters段落文本到单行并仅显示最后一个字符
【发布时间】:2019-08-02 12:45:54
【问题描述】:

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

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

但它只显示最初的单词。我想在段落溢出时显示段落的最后一句话。

原文:

Pattern Based Writing: Quick & Easy Essay 的目的是快速轻松地教学生如何组织信息并明确要点。

电流输出:

Pattern Based Writing: Quick & Easy Essay 的目的是快速轻松地教授学生..

预期输出:

Essay 是为了快速、轻松地教学生如何组织信息和明确要点。

如何用 CSS 实现这一点?

【问题讨论】:

    标签: html css user-interface user-experience


    【解决方案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;
    } 
    

    【讨论】:

    • 它的工作.. 但另一个问题会发生。如果段落有数字,它将右对齐。例如:原文:1. B2H : 当前文本:B2H .1 这是错误的。
    • 将您的内容放在 标记中。它会工作的!
    • 我们通过'rtl'从右到左对齐文本方向。因此,它将 1.、2. 视为列表项索引,并将索引单独移动到右侧。
    • 是的, 有效!你试过了吗?如果有帮助,请标记为答案。谢谢萨加尔!
    • 标签完美运行!.. 谢谢@AshokanSivapragasam
    猜你喜欢
    • 1970-01-01
    • 2021-03-11
    • 1970-01-01
    • 1970-01-01
    • 2017-04-24
    • 1970-01-01
    • 2010-11-10
    • 2011-12-05
    • 1970-01-01
    相关资源
    最近更新 更多