css自学框架之文字，左对齐、右对齐、中间对齐、两端对齐，超出文本自动显示点点，文本不换行、文本自动换行

css自学框架之文字，左对齐、右对齐、中间对齐、两端对齐，超出文本自动显示点点，文本不换行、文本自动换行。CSS代码：

/* 文字有关 */
			.font-s{ font-size: .875em }/*小字体*/
			.font-m{ font-size: 1.125em }/*正常字体*/
			.font-l{ font-size: 1.25em }/*大字体*/			
			.text-left{ text-align: left !important }/*左侧对齐*/
			.text-right{ text-align: right !important }/*右侧对齐*/
			.text-center{ text-align: center !important }/*居中对齐*/
			.text-justify{ text-align: justify !important }/*两端对齐*/
			.text-break{ word-break: break-all !important }
			.text-nowrap{ white-space: nowrap !important }
			.text-ellipsis{overflow: hidden; white-space: nowrap;text-overflow: ellipsis;}

html引用代码：

<div class="mythBox mid bg-green text-left">左对齐div>
		<div class="mythBox mid bg-yellow text-right">右对齐div>
		<div class="mythBox mid bg-green text-center">居中对齐div>
		<div class="mythBox mid bg-yellow text-justify">两端对齐,两侧对齐的文字，要这段文字出现换行才有效果呢两侧对齐的文字，要这段文字出现换行才有效果呢两侧对齐的文字，要这段文字出现换行才有效果呢两侧对齐的文字，要这段文字出现换行才有效果呢两侧对齐的文字，要这段文字出现换行才有效果呢两侧对齐的文字，要这段文字出现换行才有效果呢div>
		<div class="mythBox mid bg-green text-break">文字自动换行文字自动换行文字自动换行文字自动换行文字自动换行文字自动换行文字自动换行文字自动换行文字自动换行文字自动换行文字自动换行文字自动换行文字自动换行文字自动换行文字自动换行文字自动换行文字自动换行文字自动换行文字自动换行文字自动换行div>
		<div class="mythBox mid bg-yellow text-nowrap">文字不换行文字不换行文字不换行文字不换行文字不换行文字不换行文字不换行文字不换行文字不换行文字不换行文字不换行文字不换行文字不换行文字不换行文字不换行文字不换行文字不换行div>
		<div class="mythBox mid bg-red text-ellipsis">文字不换行，超出会出现点点文字不换行，超出会出现点点文字不换行，超出会出现点点文字不换行，超出会出现点点文字不换行，超出会出现点点div>		
		<div class="mythBox mid text-left">
			<span class="font-s">小字体span>
			<span class="font-m">正常字体span>
			<span class="font-l">大字体span>
		div>

最终效果如下图：