随笔记

css属性支持文本内容超出父元素宽度不换行显示。

当一个块元素(如div)是‘absolute定位的,父元素是相对定位,但父元素的宽度又没有子元素宽,又不想子元素换行显示,

word-break: keep-all;//中文
  white-space: nowrap; //英文
这两个属性支持文本不换行,中英文的单行显示。


<div>
  <a @click.prevent="lastPage">{{pageInfo.language=='cn'?cn.lastbtn:en.lastbtn}}</a>
  <p v-show="isShow=='last'" class="promptMessage">{{pageInfo.language=='cn'?cn.last:en.last}}</p>
</div>
 div{
  position: relative;
  display: inline-block;
  width: auto;
  height: auto;
  border-radius: 5px;
  transition: all .25s;
  text-align: center;
}
 div .promptMessage{
  position: absolute;
  background-color: rgba(0,0,0,0.6);
  height: 30px;
  line-height: 30px;
  color: #fff;
  word-break: keep-all;
  white-space: nowrap;
  padding: 0 10px;
  border-radius: 4px;
  text-align: center;
  bottom: 100%;
  margin-bottom: 10px;
  animation: isShow ease-in .2s;
  transform-origin: bottom center;
  z-index: 99;
}

阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭