Question

我正在尝试为我正在制作的网站制作一个功能区类型的标题，但我很难让文本很好地适应较小的分辨率。

有没有办法可以让文字响应，或者在较小的屏幕上流向双线？

我已将代码放入JS小提示中以显示我正在使用的here.

h3.ribbon {
background: #c3d5d8;
margin-top: 0px !important;
margin-left: -30px;
padding-left: 20px;
color: #fff;
border-bottom: 40px solid #c3d5d8;
border-right: 20px solid #fff;
height: 0px;
line-height: 40px;
font-size: 18px !important;
font-family: 'ProximaNovaThin';
text-rendering: optimizeLegibility !important;
-webkit-font-smoothing: antialiased !important;
font-weight: bold;}

Answer 1

你可以使用一个偏斜的伪元素，允许文本在需要时换行。

＆＃13;

.title {
  display: inline-block;
  width: 70%;
  min-height: 50px;
  line-height: 50px;
  background: lightgray;
  position: relative;
}
.title:before {
  content: "";
  position: absolute;
  height: 100%;
  min-width: 120px;
  width: 40%;
  left: 80%;
  background: lightgray;
  transform: skewX(45deg);
  z-index: -1;
}

＆＃13;

<div class="title">this is a long title............................a really long title! Like a super long title that should require a second line!</div>

＆＃13;

响应式带状头

1 个答案: