html - 如何放大此文本的垂直区域并减去其水平区域?

标签 html css text area

假设我有这个:enter image description here

我想让蓝色/紫色文本的水平方向变小,垂直方向变大。帮助?一些代码可能会有所帮助:

.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;
}

Fiddle

关于html - 如何放大此文本的垂直区域并减去其水平区域?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36970440/

相关文章:

javascript - 接受多个元素 droppable jquery UI

html - Google 站点 HTML 框不允许 css 转换工作

javascript - AJAX 加载不适用于脚本

html - 在 html5 中将复选框设置为选中状态,我应该简单地使用选中(作为属性)还是选中 ="checked"(作为属性)?

html - 网页 HTML/CSS 上的并排文本

javascript - 按字母在 Canvas 上绘制文本,以控制各个字母的 Alpha,同时与中心对齐

java - 从 jar 中读取文本文件

javascript - Bootstrap 复选框中的 onchange 事件

jquery - 如何使用 mmenu 管理具有不同设置的多个菜单

text - linux中根据名称对文本文件进行分组