CSS样式显示单个文本字符串的结尾答案

【问题标题】：CSS styling to show end of single text stringCSS样式显示单个文本字符串的结尾
【发布时间】：2020-09-10 22:22:15
【问题描述】：

我有一个长文本字符串。如何让所有文本以一定的宽度显示在一行上，但将显示的内容限制在字符串的末尾？

.demo {
    border: 1px solid red;
    white-space: nowrap;
    max-width: 100px;
    overflow: hidden;
}

&lt;p class="demo"&gt;hello this is a string&lt;/p&gt;

这里显示字符串的开头并切断结尾，但我需要它显示结尾并切断开头。

【问题讨论】：

【解决方案1】：

这是一个不改变方向的弹性解决方案：

.demo {
  border: 1px solid red;
  white-space: nowrap;
  max-width: 100px;
  overflow: hidden;
  display: flex;
  justify-content: flex-end;
}

&lt;p class="demo"&gt;hello this is a string&lt;/p&gt;

【讨论】：

【解决方案2】：

.demo {
    border: 1px solid red;
    white-space: nowrap;
    max-width: 100px;
    overflow: hidden;
    direction: rtl;
}

&lt;p class="demo"&gt;hello this is a string&lt;/p&gt;

【讨论】：

【解决方案3】：

如果您希望字符串的结尾显示并隐藏开头，您可以添加direction:rtl; 属性。

.demo {
    border: 1px solid red;
    white-space: nowrap;
    max-width: 100px;
    overflow: hidden;
    direction:rtl;
}

&lt;p class="demo"&gt;hello this is a string&lt;/p&gt;

【讨论】：

出于好奇... 更改direction 有什么后果吗？这将以何种方式影响可访问性，例如屏幕阅读器？
@agrm 好问题，答案是肯定的，会有一些后果。显示这一点的最简单示例是在字符串末尾添加. :) 所以这可行，但我们需要注意某些情况
@TemaniAfif 这是一个有趣的观察。尽管如果只有（或多或少）视觉后果，例如文本的对齐方式和结束标点符号的位置，那是一个不难解释的低成本。如果在幕后有其他影响，例如屏幕阅读器中断或电话号码被更改等（我知道什么？），这是我在使用 direction:rtl 之前想知道的：o)