代码之家 › 专栏 › 技术社区 › Razvan Zamfir

仅使用css,在html5元素中显示文本的最后3个字母

flexbox css3 css html

Razvan Zamfir · 技术社区 · 7 年前

如果我有一个固定宽度和高度的元素,我如何只显示 最后3个字母 HTML5元素中的文本,而不是 前3个字母 是吗?

.box {
  font-family: Arial, sans-serif;
  display: block;
  text-align: center;
  font-weight: 900;
  font-size: 72px;
  width: 125px;
  height: 125px;
  line-height: 120px;
  overflow: hidden;
}

span {
  display: block;
  white-space: nowrap;
}

<div class="box">
  <span>Lorem ipsum dolor sit amet</span>
</div>

省略号不起作用。我正在努力做到这一点没有 javascript。

是否只有CSS解决方案?

3 回复 | 直到 7 年前

Asons Oliver Joseph Ash 7 年前

正在添加 float: right; 致 span 会的。

堆栈段

.box {
  font-family: Arial, sans-serif;
  display: block;
  text-align: center;
  font-weight: 900;
  font-size: 72px;
  width: 125px;
  height: 125px;
  line-height: 120px;
  overflow: hidden;
}

span {
  display: block;
  white-space: nowrap;
  float: right;
}

<div class="box">
  <span>Lorem ipsum dolor sit amet</span>
</div>

或 display: flex; justify-content: flex-end; 上 .box

堆栈段

.box {
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: flex-end;
  text-align: center;
  font-weight: 900;
  font-size: 72px;
  width: 125px;
  height: 125px;
  line-height: 120px;
  overflow: hidden;
}

span {
  display: block;
  white-space: nowrap;
}

<DIV class=“box”>
<SPAN>Lorem Ipsum Dolor Sit Amet</SPAN>
</DIV>

Nandita Sharma 7 年前

使用 direction: rtl;

.box {
  font-family: Arial, sans-serif;
  display: block;
  text-align: center;
  font-weight: 900;
  font-size: 72px;
  width: 125px;
  height: 125px;
  line-height: 120px;
  overflow: hidden;
}

span {
  display: block;
  white-space: nowrap;
 direction: rtl;
}

<div class="box">
  <span>Lorem ipsum dolor sit amet</span>
</div>

-1

Shailesh 7 年前

试试这个

function myFunction() {
    var str = "Lorem ipsum dolor sit amet";
    var res = str.slice(-3);
    document.getElementById("demo").innerHTML = res;
}
window.onload = myFunction;

<div class="box">
  <span id="demo"></span>
</div>

推荐文章

Luca Phillips · 当表是div flex的子级时,它有巨大的空间

2 年前

Nishit Agrawal · Flexbox-将第三项与第二项对齐

2 年前

alan · 有没有办法向flexbox图像添加链接?

2 年前

Gary · CSS在弹性方框布局中用句点字符串填充段落剩余部分的方法?

2 年前

n1234 · Flexbox-图像和内容

7 年前

nCardot · 为什么是!h1元素媒体查询工作所需的重要信息?[副本]

7 年前

Adam Olsson · 在中心CSS中对齐单个列表项

7 年前

London804 · 我是否可以使设置为对齐内容的元素:换行时间距向右对齐?

7 年前

user3137124 · 当“flex direction”为“column”时,如何将div与顶部对齐?[副本]

7 年前

AJ- · 无法垂直对齐文本-angularJS+bootstrap+flexbox

7 年前