CSS ：文本对齐演示
本帖最后由 马黑黑 于 2023-7-29 11:23 编辑 <br /><br /><style>#txtBox {
margin: 20px auto;
padding: 10px;
width: 740px;
min-height: 200px;
border: 1px solid gray;
}
.txtAlign { margin: 10px; width: 100px; }
.center { text-align: center; font-size: 12px; }
</style>
<div id="txtBox">
<p>Life is too short to spend time with people who suck the happiness out of you. If someone wants you in their life, they’ll make room for you. You shouldn’t have to fight for a spot. Never, ever insist yourself to someone who continuously overlooks your worth. And remember, it’s not the people that stand by your side when you’re at your best, but the ones who stand beside you when you’re at your worst that are your true friends.</p>
<p>人生苦短，没有必要和那些令你不快乐的人纠缠。如果那个人需要你，你不需要刻意去做什么，他/她自然会留出你的位置。绝对不要和那些低看了你价值的人在一起。记住，一帆风顺时守在自己身边并不珍贵，当你深陷困境却依然和你并肩在一起的才是真正的朋友。</p>
<p>Only when you understand the true meaning of life can you live truly. Bittersweet as life is, it's still wonderful, and it's fascinating even in tragedy. If you're just alive, try harder and try to live wonderfully.</p>
<p>只有在你了解了人生的真谛后，才能真正地生活。虽然人生苦忧参半，但依旧美妙，而且即使在悲剧中也藏着迷人之处。如果你只是活着，那就再努力点吧，试着活得精彩。</p>
</div>
<p class="center">
<button class="txtAlign" value="left" disabled="disabled">左对齐</button>
<button class="txtAlign" value="center">居中</button>
<button class="txtAlign" value="right">右对齐</button>
<button class="txtAlign" value="justify">两端对齐</button>
<button class="txtAlign" value="justify">强制两端对齐</button>
</p>
<pre>
附一：text-align 属性赋值
left 左对齐
center 居中
right 右对齐
start 左对齐或右对齐（取决于文本方向）
end 右对齐或左对齐（取决于文本方向）
justify 两端对齐（段落的最后一行无效）
justify-all 全部文本行两端对齐（实验性，各浏览器均不支持，慎用）
inherit 继承父辈元素的对齐设定
match-parent 同 inherit 但依据文本方向赋予父辈元素的 start 与 end 含义
附二：通用强制两端对齐方法
text-align: justify;
text-align-last: justify;
附三：拼音类文本（含数字）以单词结构处理两端对齐，汉字以单字为单位处理两端对齐
</pre>
<script>
let last = 0;
let btns = document.querySelectorAll('.txtAlign');
btns.forEach( (btn,k) => {
btn.onclick = () => {
txtBox.style.textAlign = btn.value;
k === btns.length -1 ? txtBox.style.textAlignLast = btn.value : txtBox.style.setProperty('text-align-last', 'initial');
btn.disabled = true;
btns.disabled = false;
last = k;
};
});
</script>
这个好玩，一个个试下来，非常听指挥{:4_187:} 这个是对齐方式，那有没有首行缩进呢，比如换行的缩进2个汉字{:4_173:} 红影 发表于 2023-7-29 09:41
这个是对齐方式，那有没有首行缩进呢，比如换行的缩进2个汉字
这有，是标准属性，你可以去查一下w3c提供的资料，很齐全 红影 发表于 2023-7-29 09:40
这个好玩，一个个试下来，非常听指挥
这个不是拿来玩的，而是理解文本对齐的方方面面，尤其是两端对齐，很多人都不知道的 老师先演示，再给附一二三教使用，实用之极。。。{:4_199:} 花飞飞 发表于 2023-7-29 18:58
老师先演示，再给附一二三教使用，实用之极。。。
据说，附的越多越啰嗦{:4_170:} 马黑黑 发表于 2023-7-29 20:20
据说，附的越多越啰嗦
代码这东东，特别需要啰嗦{:4_170:}越啰嗦越好 花飞飞 发表于 2023-7-29 20:47
代码这东东，特别需要啰嗦越啰嗦越好
不会吧 马黑黑 发表于 2023-7-29 20:47
不会吧
说明越多越清楚啊。。。。
特别是对要背单词的小白来说。。{:4_170:} 花飞飞 发表于 2023-7-29 20:58
说明越多越清楚啊。。。。
特别是对要背单词的小白来说。。
几个单词要记记 马黑黑 发表于 2023-7-29 10:29
这有，是标准属性，你可以去查一下w3c提供的资料，很齐全
看到黑黑又专门发了个首行缩进的帖子，谢谢了{:4_187:} 马黑黑 发表于 2023-7-29 10:30
这个不是拿来玩的，而是理解文本对齐的方方面面，尤其是两端对齐，很多人都不知道的
而且这个还是挺有用的。比如让某个框里的文字去对齐某样东西。就不用自己去输入空格了。 红影 发表于 2023-7-29 21:36
而且这个还是挺有用的。比如让某个框里的文字去对齐某样东西。就不用自己去输入空格了。
你说的这个，是文本基于特定事物的排版，这个还要复杂，不过我好想也介绍过 红影 发表于 2023-7-29 21:35
看到黑黑又专门发了个首行缩进的帖子，谢谢了
这些都是基础的呢 马黑黑 发表于 2023-7-29 21:23
几个单词要记记
{:4_170:}记牢有助于理解 花飞飞 发表于 2023-7-29 22:39
记牢有助于理解
也不算难，都是熟悉的字母 马黑黑 发表于 2023-7-29 22:01
你说的这个，是文本基于特定事物的排版，这个还要复杂，不过我好想也介绍过
是的，黑黑曾经专门讲过关于文字排版的内容，只是很早了，已经忘的差不多了。{:4_189:} 马黑黑 发表于 2023-7-29 22:01
这些都是基础的呢
基础都是很重要的东西呀。 红影 发表于 2023-7-29 22:40
基础都是很重要的东西呀。
所以我建议去看看文档