`
keimon
  • 浏览: 75306 次
  • 性别: Icon_minigender_2
  • 来自: 上海
社区版块
存档分类
最新评论

文本两端对齐

css 
阅读更多

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>文本两端对齐</title>

<style>

.demo {background:#fff}

.demo-text p{

    overflow:hidden;

    width:200px;

line-height:24px;

    margin:0 auto 10px;

    border:1px solid #ccc;

background:#eee;

}

 

/* justify for All */

.text-justify p{

    text-align:justify;

    text-align-last:justify;

}

.single-line-justify p{

    height:24px;

}

.single-line-justify p:after{

    display:inline-block;

    content:'';

    overflow:hidden;

    width:100%;

    height:0;

}

 

 

</style>

 </head>

 <body>

<div class="wrap">

    <h1>Web 文本两端对齐</h1>

<p class="browser">浏览器参照基准:IE5.5+, Firefox4+, Chrome5+, Safari5+, Opera10.53+ </p>

    <p>两端对齐方案基于 text-align:justify 及 text-align-last:justify 实现</p>

 

<div class="demo demo-text text-justify single-line-justify">

   <h3 class="tc">综合兼容实现</h3>

   <p>世 界 末 日 2012</p>

   <p>把 钱 都 花 了 ?</p>

   <p>末 日 没 来</p>

   <p>傻 了 吧</p>

    </div>

</div>

 </body>

</html> 

分享到:
评论

相关推荐

    ECharts多行文字两端对齐饼图.zip

    在ECharts的饼图中,我们常常需要添加文字说明来辅助理解数据,而“ECharts多行文字两端对齐饼图”则是针对这种需求的一种解决方案。 在ECharts中,当饼图上的标签内容较长时,为了保持清晰的视觉效果,通常会采用...

    WPF单行文本两端对齐

    WPF是不支持单行文本的两端对齐的,于是自己写了一个控件。有兴趣的朋友可以下载了解一下我的设计原理。

    文本两端对齐显示

    把本本放于一个文本文档中,然后按行按两端对齐显示,长度小于一半的左对齐

    新两端对齐的TextView

    "新两端对齐的TextView"项目正是针对这种需求,提供了在Android Studio中实现两端对齐文本的功能。 在标准的Android SDK中,原生的TextView并不直接支持文本两端对齐。不过,开发者可以利用一些技巧或第三方库来...

    实现文本两端对齐的代码实例讲解.docx

    在网页设计中,文本的对齐方式是布局中不可或缺的一部分,尤其在创建表单或文本块时,确保文本两端对齐能够提供更好的视觉效果和阅读体验。本文将深入讲解如何实现文本两端对齐,并通过代码实例来演示其具体操作。 ...

    css文本两端对齐的实现代码

    本文将深入探讨如何使用CSS实现文本的两端对齐,特别是在处理中文文本时的挑战。 首先,`text-align` 属性是实现文本对齐的基础,它允许你控制元素内部的文本水平对齐方式。当设置为 `justify` 时,`text-align` 会...

    CKEditor 4.1.1 两端对齐按钮支持中文两端对齐补丁

    本补丁通过加入text-justify:inter-ideograph,可以使CKEditor4.1.1中两端对齐按钮支持中文两端对齐,原版本只支持西文两端对齐, 本补丁仅支持CKEditor4.1.1其他版本的不要打(包括CKEditor4.1)。

    火狐、ie中英文两端对齐

    "火狐、ie中英文两端对齐"的问题主要涉及到CSS样式设置,尤其是文本对齐属性(text-align)的应用。在这篇文章中,我们将深入探讨这个问题,以及如何通过调整CSS来实现中英文在火狐和IE上的两端对齐效果。 首先,...

    ckeditor 4.1 两端对齐按钮支持中文两端对齐补丁

    在这款编辑器的早期版本4.1中,存在一个关于中文文字排版的问题,即默认配置下,两端对齐(Full Justify)按钮可能无法正确地对中文文本进行两端对齐显示。这个问题主要源于CSS样式处理上的不足,特别是针对汉字的...

    ios-文字两头对齐.zip

    总的来说,这个压缩包提供了一个方便的解决方案,帮助开发者在iOS应用中快速实现文字两端对齐的功能。它可能包含一个自定义的UILabel类别,扩展了对齐选项,或者是一个封装了复杂对齐逻辑的工具类。开发者只需要简单...

    小程序中实现动态处理表格,文本两端对齐

    在探讨小程序中如何动态处理表格以及实现文本两端对齐的知识点之前,首先要明确小程序的开发环境和框架。目前,微信小程序是市场上比较流行的小程序开发平台,它的开发涉及到特定的编程语言和框架标准。而在...

    text文字内容两边对齐

    首先,`TextView`提供了多种对齐方式,包括左对齐、右对齐、居中以及两端对齐。在XML布局中,这些可以通过`android:textAlignment`属性来设置,例如: ```xml android:layout_width="wrap_content" android:...

    两端对齐的Android文本显示控件设计与实现.pdf

    通常我们使用TextView控件来处理文本显示,但在某些情况下,特别是中文排版时,用户可能需要两端对齐的效果,而Android自带的TextView并不能很好地满足这一需求。本文将深入探讨TextView的实现原理,并介绍如何设计...

    Android TextView两端对齐解决办法

    Android TextView 两端对齐是一个常见的问题,特别是在需要对文字进行对齐时。在 Android 中,TextView 控件不能直接实现两端对齐的效果,因此需要自定义 View 来实现该功能。 在解决方案中,我们可以使用自定义的 ...

    两端对齐的TextView

    `属性来实现两端对齐,但这也限制了只能在Webview环境下使用。 以上就是解决Android原生`TextView`右端对齐问题的一些常见方法。具体选择哪种方法,需要根据项目的实际需求和性能考虑。在实践中,往往需要结合多种...

    安卓平台的两端对齐控件,亲测可用

    "两端对齐控件"是一种常见的UI设计,它使得控件中的文本在两端都能保持对齐,类似于排版印刷中的“两端对齐”样式。在本篇文章中,我们将深入探讨如何在Android应用中实现这种效果,并以"安卓平台的两端对齐控件,亲...

    css 文本两端对齐应用实例

    auto :允许浏览器用户代理确定使用的两端对齐法则 inter-word :通过增加字之间的空格对齐文本。该行为是对齐所有文本行最快的方法。它的两端对齐行为对段落的最后一行无效 newspaper : 通过增加或减少字或字母之间的...

    word两端对齐、分散对齐.docx

    两端对齐是一种常用的文本排列方式,尤其在Word等文字处理软件中极为常见。所谓“两端对齐”,是指文档中的文字在水平方向上既对齐左边界也对齐右边界。这种方式可以使文档看起来更加整齐美观。 **特点与应用:** ...

Global site tag (gtag.js) - Google Analytics