时间戳

首页 > 解决方案 > 具有响应性的垂直文本

html - 具有响应性的垂直文本

问题描述

我正在为垂直文本而苦苦挣扎

这是我的笨蛋

我想做的是制作一个垂直文本，其中：

  1. 如果短文本出现在垂直文本的 div 内，那么它应该在 div 的中间
  2. 如果 div 内有长文本，它应该从页面底部开始，但它应该是响应式的（例如，如果我最小化我的窗口底部文本不应该隐藏它会在 div 中出现）并且...省略号应该在垂直文本中大文本的最后一个

我已经实现了 1。但是 2nd 没有完全工作，没有响应，文本进入 div 并且不可见。

标签： htmlcsssassresponsive-design

解决方案

这可能会帮助你

.main{
	transform: translate(0, 50%) rotate(-90deg);
  
}
.sub{
    white-space: nowrap; 
    width: 250px; 
    height:20px; 
    overflow: hidden;
    text-overflow: ellipsis;   
    text-align:center;       
    position: absolute;  
    cursor: pointer;
    border: 1px solid grey;   
    background: linear-gradient(to right, white, lightgrey);
    border-radius: 2px;
}
.two{
  top:20px;
}
<div class="main">
   <div class="sub one">Hello world!</div>
</div>
<div class="main">
  <div class="sub two">a large text too large to contain tin the div. large text too large to contain tin the div.
  </div>
</div>

推荐阅读