如何放大此文本的垂直区域并减去其水平区域?
How to enlarge this text vertical area and subtract its horizontal area?
假设我有这个:
我想让 blue/purple 文本的水平方向变小,垂直方向变大。帮助?一些代码可能会有所帮助:
.n {
color: #7986cb;
text-decoration: none;
outline: none;
top: -10px;
transition: all .2s ease-in;
font-size: 20px;
font-style: oblique;
}
.n:hover {
color: #3f51b5;
}
.mc {
position: relative;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
text-align: center;
display: inline-block;
outline-width: 50px;
}
<section class="mc">
<a class="n">O sociólogo francês Emile Durkheim estuda a sociedade como um organismo. É preciso que tomemos cuidado com todos órgãos de nossa sociedade, façamos com que eles trabalhem em conjunto, pois, se um deles possui dificuldades, isso virá a afetar todo o funcionamento da mesma. Pequenos atos serão os primeiros passos para manter nosso organismo saudável e nutrido.</a>
</section>
您可以通过更改以下部分的 width
来实现:
.mc {
position: relative;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
text-align: center;
display: inline-block;
outline-width: 50px;
width: 500px;
}
假设我有这个:
我想让 blue/purple 文本的水平方向变小,垂直方向变大。帮助?一些代码可能会有所帮助:
.n {
color: #7986cb;
text-decoration: none;
outline: none;
top: -10px;
transition: all .2s ease-in;
font-size: 20px;
font-style: oblique;
}
.n:hover {
color: #3f51b5;
}
.mc {
position: relative;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
text-align: center;
display: inline-block;
outline-width: 50px;
}
<section class="mc">
<a class="n">O sociólogo francês Emile Durkheim estuda a sociedade como um organismo. É preciso que tomemos cuidado com todos órgãos de nossa sociedade, façamos com que eles trabalhem em conjunto, pois, se um deles possui dificuldades, isso virá a afetar todo o funcionamento da mesma. Pequenos atos serão os primeiros passos para manter nosso organismo saudável e nutrido.</a>
</section>
您可以通过更改以下部分的 width
来实现:
.mc {
position: relative;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
text-align: center;
display: inline-block;
outline-width: 50px;
width: 500px;
}