主页 / 问题 / 1583793
Accepted
BlackStar1991
Asked:2024-06-13 20:04:18 +0800 CST2024-06-13 20:04:18 +0800 CST

CSS 将文本放在块的不同侧面？

  • 772

这是一个简单的例子：

body {
  margin: 0;
}

h1 {
  font-size: 15vh;
  width: 30vw;
  text-align: justify;
  margin: 1vh 0;
}
<h1>Text1 Text2Long</h1>

问题 - 是否可以使用某些СSS属性使单词延伸到块的整个允许宽度？如果标签中有两个单词，第一个单词始终位于左侧，第二个单词始终位于右侧，该怎么办？无需在html标记中添加第三方标签。

text-align: justify;它没有按预期工作。

这就是我希望最终的结果。框架显示了块的面积。块宽度可以动态改变。该属性的类似物justify-content: space-between，但对于文本字段......字数并不重要。 例子

html

2 个回答

  1. Best Answer

    h1 {
  text-align: justify;
  text-align-last: justify;
  border: 5px solid red;
  animation: abc 2.5s infinite;
  height: 4em;
}

@keyframes abc{
0%{width: 1%;}
50%{width: 100%;}
to{width: 1%;}
}
    <h1>так пойдёт?</h1>

    • 2

  2. 我不确定是否可以将这些属性设置为文本，但是如果将它们转换为块，它将看起来像这样：

    html,
body {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  height: 100%;
}

.string {
  display: grid;
  height: 100vh;
}

h1 {
  font-size: 15vh;
  width: 30vw;
  margin: 1vh 0;
}

.stroka_1 {
  justify-self: start;
}

.stroka_2 {
  justify-self: end;
  align-self: end;
}
    <div class="string">
  <h1 class="stroka_1">Text1</h1>
  <h1 class="stroka_2">Text2Long</h1>
</div>

    PS 将第二个文本移至“新”h1

    • -1

相关问题