精华内容
下载资源
问答
  • CSS各种对齐代码,左对齐、右对齐、中间对齐、底部对齐、两端对齐等,代码简单 /*CSS代码:*/ /*左对齐*/ .left { text-align: left; border: 1px dotted black; width: 50%; } /*右对齐*/ .right { text-...
    CSS各种对齐代码,左对齐、右对齐、中间对齐、底部对齐、两端对齐等,代码简单


     
    /*CSS代码:*/
    /*左对齐*/
    .left {
            text-align: left;
            border: 1px dotted black;
            width: 50%;
    }
    /*右对齐*/
    .right {
            text-align: right;
            border: 1px dotted black;
            width: 50%;
    }
    /*居中对齐*/
    .center {
            text-align: center;
            border: 1px dotted black;
            width: 50%;
    }
    /*两端对齐*/
    .justify {
            text-align: justify;
            border: 1px dotted black;
            width: 50%;
    }
    
    
    
    /*css3将一个div水平和垂直居中显示*/
    
    .div1{
    
        width: 100px;
        height: 100px;
        border: 4px solid red;
        position: absolute;
    
        text-align: center;
    
        left:0;
        right:0;
        top: 0;
        bottom: 0;
        margin: auto;
        /*50%为自身尺寸的一半*/
    }

     
    展开全文
  • 本补丁通过加入text-justify:inter-ideograph,可以使CKEditor4.1.1中两端对齐按钮支持中文两端对齐,原版本只支持西文两端对齐, 本补丁仅支持CKEditor4.1.1其他版本的不要打(包括CKEditor4.1)。
  • 在ckeditor 4.1两端对齐按钮插件中加入text-justify:inter-ideograph,以支持中文两端对齐显示。
  • android TextView 分散对齐(两端对齐

    千次阅读 2018-10-30 18:10:10
    达到对齐的效果。 * * * 重新设置文本前,请调用reset()进行状态重置。 * * Created by Rivers on 6/28/18. */ public class AlignTextView extends TextView { private final static String TAG = ...
    
    
    import android.content.ClipboardManager;
    import android.content.Context;
    import android.content.res.TypedArray;
    import android.graphics.Paint;
    import android.os.Build;
    import android.text.TextUtils;
    import android.util.AttributeSet;
    import android.util.Log;
    import android.widget.TextView;
    
    import java.lang.reflect.Method;
    import java.util.ArrayList;
    import java.util.List;
    
    /**
     * 对齐的TextView
     * <p>
     * 为了能够使TextView能够很好的进行排版,同时考虑到原生TextView中以word进行分割排版,
     * 那么我们可以将要换行的地方进行添加空格处理,这样就可以在合适的位置换行,同时也不会
     * 打乱原生的TextView的排版换行选择复制等问题。为了能够使右端尽可能的对齐,将右侧多出的空隙
     * 尽可能的分配到该行的标点后面。达到两段对齐的效果。
     * </p>
     * <p>
     * 重新设置文本前,请调用reset()进行状态重置。
     * </p>
     * Created by Rivers on 6/28/18.
     */
    public class AlignTextView extends TextView {
        private final static String TAG = AlignTextView.class.getSimpleName();
        private final static char SPACE = ' '; //空格;
        private List<Integer> addCharPosition = new ArrayList<Integer>();  //增加空格的位置
        private static List<Character> punctuation = new ArrayList<Character>(); //标点符号
        private CharSequence oldText = ""; //旧文本,本来应该显示的文本
        private CharSequence newText = ""; //新文本,真正显示的文本
        private boolean inProcess = false; //旧文本是否已经处理为新文本
        private boolean isAddPadding = false; //是否添加过边距
        private boolean isConvert = false; //是否转换标点符号
    
        //标点符号用于在textview右侧多出空间时,将空间加到标点符号的后面,以便于右端对齐
        static {
            punctuation.clear();
            punctuation.add(',');
            punctuation.add('.');
            punctuation.add('?');
            punctuation.add('!');
            punctuation.add(';');
            punctuation.add(',');
            punctuation.add('。');
            punctuation.add('?');
            punctuation.add('!');
            punctuation.add(';');
            punctuation.add(')');
            punctuation.add('】');
            punctuation.add(')');
            punctuation.add(']');
            punctuation.add('}');
        }
    
        public AlignTextView(Context context) {
            super(context);
        }
    
        public AlignTextView(Context context, AttributeSet attrs) {
            super(context, attrs);
            TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.AlignTextView);
            isConvert = ta.getBoolean(R.styleable.AlignTextView_punctuationConvert, false);
            ta.recycle();
    
            //判断使用xml中是用android:text
            TypedArray tsa = context.obtainStyledAttributes(attrs, new int[]{
                    android.R.attr.text
            });
            String text = tsa.getString(0);
            tsa.recycle();
            if (!TextUtils.isEmpty(text)) {
                setText(text);
            }
        }
    
        /**
         * 监听文本复制,对于复制的文本进行空格剔除
         *
         * @param id 操作id(复制,全部选择等)
         * @return 是否操作成功
         */
        @Override
        public boolean onTextContextMenuItem(int id) {
            if (id == android.R.id.copy) {
    
                if (isFocused()) {
                    final int selStart = getSelectionStart();
                    final int selEnd = getSelectionEnd();
    
                    int min = Math.max(0, Math.min(selStart, selEnd));
                    int max = Math.max(0, Math.max(selStart, selEnd));
    
                    //利用反射获取选择的文本信息,同时关闭操作框
                    try {
                        Class cls = getClass().getSuperclass();
                        Method getSelectTextMethod = cls.getDeclaredMethod("getTransformedText", new
                                Class[]{int.class, int.class});
                        getSelectTextMethod.setAccessible(true);
                        CharSequence selectedText = (CharSequence) getSelectTextMethod.invoke(this,
                                min, max);
                        copy(selectedText.toString());
    
                        Method closeMenuMethod;
                        if (Build.VERSION.SDK_INT < 23) {
                            closeMenuMethod = cls.getDeclaredMethod("stopSelectionActionMode");
                        } else {
                            closeMenuMethod = cls.getDeclaredMethod("stopTextActionMode");
                        }
                        closeMenuMethod.setAccessible(true);
                        closeMenuMethod.invoke(this);
                    } catch (Exception e) {
                        e.printStackTrace();
                    }
                }
                return true;
            } else {
                return super.onTextContextMenuItem(id);
            }
        }
    
    
        /**
         * 复制文本到剪切板,去除添加字符
         *
         * @param text 文本
         */
        private void copy(String text) {
            ClipboardManager clipboard = (ClipboardManager) getContext().getSystemService(Context
                    .CLIPBOARD_SERVICE);
            int start = newText.toString().indexOf(text);
            int end = start + text.length();
            StringBuilder sb = new StringBuilder(text);
            for (int i = addCharPosition.size() - 1; i >= 0; i--) {
                int position = addCharPosition.get(i);
                if (position < end && position >= start) {
                    sb.deleteCharAt(position - start);
                }
            }
            try {
                android.content.ClipData clip = android.content.ClipData.newPlainText(null, sb.toString());
                clipboard.setPrimaryClip(clip);
            }catch (Exception e){
               Log.e(TAG, e.getMessage());
            }
        }
    
        /**
         * 重置状态
         */
        public void reset(){
            inProcess = false;
            addCharPosition.clear();
            newText = "";
            newText = "";
        }
    
        /**
         * 处理多行文本
         *
         * @param paint 画笔
         * @param text  文本
         * @param width 最大可用宽度
         * @return 处理后的文本
         */
        private String processText(Paint paint, String text, int width) {
            if (text == null || text.length() == 0) {
                return "";
            }
            String[] lines = text.split("\\n");
            StringBuilder newText = new StringBuilder();
            for (String line : lines) {
                newText.append('\n');
                newText.append(processLine(paint, line, width, newText.length() - 1));
            }
            if (newText.length() > 0) {
                newText.deleteCharAt(0);
            }
            return newText.toString();
        }
    
    
        /**
         * 处理单行文本
         *
         * @param paint                     画笔
         * @param text                      文本
         * @param width                     最大可用宽度
         * @param addCharacterStartPosition 添加文本的起始位置
         * @return 处理后的文本
         */
        private String processLine(Paint paint, String text, int width, int addCharacterStartPosition) {
            if (text == null || text.length() == 0) {
                return "";
            }
    
            StringBuilder old = new StringBuilder(text);
            int startPosition = 0; // 起始位置
    
            float chineseWidth = paint.measureText("中");
            float spaceWidth = paint.measureText(SPACE + "");
    
            //最大可容纳的汉字,每一次从此位置向后推进计算
            int maxChineseCount = (int) (width / chineseWidth);
    
            //减少一个汉字宽度,保证每一行前后都有一个空格
            maxChineseCount--;
    
            //如果不能容纳汉字,直接返回空串
            if (maxChineseCount <= 0) {
                return "";
            }
    
            for (int i = maxChineseCount; i < old.length(); i++) {
                if (paint.measureText(old.substring(startPosition, i + 1)) > (width - spaceWidth)) {
    
                    //右侧多余空隙宽度
                    float gap = (width - spaceWidth - paint.measureText(old.substring(startPosition,
                            i)));
    
                    List<Integer> positions = new ArrayList<Integer>();
                    for (int j = startPosition; j < i; j++) {
                        char ch = old.charAt(j);
                        if (punctuation.contains(ch)) {
                            positions.add(j + 1);
                        }
                    }
    
                    //空隙最多可以使用几个空格替换
                    int number = (int) (gap / spaceWidth);
    
                    //多增加的空格数量
                    int use = 0;
    
                    if (positions.size() > 0) {
                        for (int k = 0; k < positions.size() && number > 0; k++) {
                            int times = number / (positions.size() - k);
                            int position = positions.get(k / positions.size());
                            for (int m = 0; m < times; m++) {
                                old.insert(position + m, SPACE);
                                addCharPosition.add(position + m + addCharacterStartPosition);
                                use++;
                                number--;
                            }
                        }
                    }
    
                    //指针移动,将段尾添加空格进行分行处理
                    i = i + use;
                    old.insert(i, SPACE);
                    addCharPosition.add(i + addCharacterStartPosition);
    
                    startPosition = i + 1;
                    i = i + maxChineseCount;
                }
            }
    
            return old.toString();
        }
    
        @Override
        public void setText(CharSequence text, BufferType type) {
            //父类初始化的时候子类暂时没有初始化, 覆盖方法会被执行,屏蔽掉
            if (addCharPosition == null) {
                super.setText(text, type);
                return;
            }
            if (!inProcess && (text != null && !text.equals(newText))) {
                oldText = text;
                process(false);
                super.setText(newText, type);
            } else {
                //恢复初始状态
                inProcess = false;
                super.setText(text, type);
            }
        }
    
        /**
         * 获取真正的text
         *
         * @return 返回text
         */
        public CharSequence getRealText() {
            return oldText;
        }
    
        /**
         * 文本转化
         *
         * @param setText 是否设置textView的文本
         */
        private void process(boolean setText) {
            if (oldText == null) {
                oldText = "";
            }
            if (!inProcess && getVisibility() == VISIBLE) {
                addCharPosition.clear();
    
                //转化字符,5.0系统对字体处理有所变动
                if (isConvert) {
                    oldText = AlignTextViewUtil.replacePunctuation(oldText.toString());
                }
    
                if (getWidth() == 0) {
                    //没有测量完毕,等待测量完毕后处理
                    post(new Runnable() {
                        @Override
                        public void run() {
                            process(true);
                        }
                    });
                    return;
                }
    
                //添加过边距之后不再次添加
                if (!isAddPadding) {
                    int spaceWidth = (int) (getPaint().measureText(SPACE + ""));
                    newText = processText(getPaint(), oldText.toString(), getWidth() - getPaddingLeft
                            () -
                            getPaddingRight() - spaceWidth);
                    setPadding(getPaddingLeft() + spaceWidth, getPaddingTop(), getPaddingRight(),
                            getPaddingBottom());
                    isAddPadding = true;
                } else {
                    newText = processText(getPaint(), oldText.toString(), getWidth() - getPaddingLeft
                            () -
                            getPaddingRight());
                }
                inProcess = true;
                if (setText) {
                    setText(newText);
                }
            }
        }
    
        /**
         * 是否转化标点符号,将中文标点转化为英文标点
         *
         * @param convert 是否转化
         */
        public void setPunctuationConvert(boolean convert) {
            isConvert = convert;
        }
    }
    /**
     * 文本工具
     */
    public class AlignTextViewUtil {
    
        /**
         * 将中文标点替换为英文标点
         *
         * @param text 要替换的文本
         * @return 替换后的文本
         */
        public static String replacePunctuation(String text) {
            text = text.replace(',', ',').replace('。', '.').replace('【', '[').replace('】', ']')
                    .replace('?', '?').replace('!', '!').replace('(', '(').replace(')', ')').replace
                            ('“', '"').replace('”', '"');
            return text;
        }
    }

    res/values/aligntextview_attr.xml

    <?xml version="1.0" encoding="utf-8"?>
    <resources>
    
        <!-- 末行对齐方式 -->
        <declare-styleable name="AlignTextView">
            <attr name="align" format="enum">
                <enum name="left" value="0"/>
                <enum name="center" value="1"/>
                <enum name="right" value="2"/>
            </attr>
        </declare-styleable>
    
        <!-- 标点转换 -->
        <declare-styleable name="CBAlignTextView">
            <attr name="punctuationConvert" format="boolean"/>
        </declare-styleable>
    
    
    </resources>

    如果需要支持android默认的选择复制,请在xml中加入以下代码:

    android:textIsSelectable="true"
    展开全文
  • 可以看到,常见的文本对齐方式是靠左、居中以及靠右,相对来说css两端对齐用得还是比较少的,只在某些特殊情况下使用。总之这些css代码很简单,大家应该能够很快学会。在设计页面的时候会涉及到文本对齐的问题,默认...

    css两端对齐怎么设置,css中文本的对齐有哪些

    内容导读:除了css两端对齐,本文还介绍了主要的css中文本的对齐有哪些。可以看到,常见的文本对齐方式是靠左、居中以及靠右,相对来说css两端对齐用得还是比较少的,只在某些特殊情况下使用。总之这些css代码很简单,大家应该能够很快学会。

    在设计页面的时候会涉及到文本对齐的问题,默认情况下是靠左对齐的,但有些时候也乤靠右对齐。本文给大家介绍下css两端对齐,看看css两端对齐怎么设置,以及css中文本的对齐有哪些。

    一、css两端对齐怎么设置

    我们先来看下css两端对齐的效果图:

    9b0991147a0ef9784d583004ac766b2d.png

    上面的代码是:

    css两端对齐

    为了让效果更加明显,我们给div加了宽度和底色等,其中css两端对齐的代码是 text-align-last:justify 。大家如果想像文本两段对齐的话,在css里面加入这个属性代码就可以了,当然也可以结合具体情况设置其他的css样式,让整个效果更加好看。

    二、css中文本的对齐有哪些

    语法:text-align : left | right | center

    说明:设定元素内文本的水平对齐方式。

    参数:left : 左对齐;right : 右对齐;center :  居中;justify :  两端对齐

    前面说到默认情况下,文本是左对齐,那么如果要让文本靠右对齐,代码是:

    css靠右对齐

    以下是效果图:

    f329a24741df470bf40fa7a72b414b29.png

    如果让文本居中对齐,代码是:

    css居中对齐

    以下是效果图:

    bafd83f37dae63bfb8edbe435d31e2dd.png

    关于css两端对齐的问题,本文就介绍到这里。除了css两端对齐,本文还介绍了主要的css中文本的对齐有哪些。可以看到,常见的文本对齐方式是靠左、居中以及靠右,相对来说css两端对齐用得还是比较少的,只在某些特殊情况下使用。总之这些css代码很简单,大家应该能够很快学会。

    相关知识点

    CSS:层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

    本文标签:css

    这篇关于“css两端对齐怎么设置,css中文本的对齐有哪些”的文章已帮助 1358 人,希望也能帮到你!

    本站内容大部分由沐风博客原创,少部分内容来源于网络,如有侵权请与我们联系,我们会及时删除!

    责任编辑:沐风 | 发布时间:2020年05月21日15点21分36秒 |

    本文永久地址为 http://www.tangmengyun.com/seo/1982.html

    展开全文
  • 如题,在开发中,经常会用到比如说类似于表格的排版,效果图: ...可以看出,不能完美对齐,这肯定不是想要的效果,然后就发现了个占字符来实现:     他们与汉字换算关系就是1个汉字 = 4个




    如题,在开发中,经常会用到比如说类似于表格的排版,效果图:


    这里写图片描述



    这样的效果,谷歌也没给出这样效果的方法,网上查也没找到实现方法,然后想,中间用空格填充呢?试试,然后写了几个TextView对比一下,如下:


    这里写图片描述




    放大效果:


    这里写图片描述




    可以看出,不能完美对齐,这肯定不是想要的效果,然后就发现了两个占字符来实现:

    &#160;
    &#12288;
    &#8194;
    &#8197;



    他们与汉字换算关系就是1个汉字 = 4个&#160; = 4个&#8197; = 1个&#12288; = 2个&#8194;


    如下:

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="这是测试:"
                android:textSize="22sp"
                />
    
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="密&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;码:"
                android:textSize="22sp"
                />
    
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="密&#12288;&#12288;码:"
                android:textSize="22sp"
                />



    效果图:


    这里写图片描述



    放大效果:

    这里写图片描述




    至于两个怎么用,就看需求了,比如这个:


    这里写图片描述


    使用:

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="这是测试:"
                android:textSize="22sp"
                />
    
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="小&#160;&#160;密&#160;&#160;码:"
                android:textSize="22sp"
                />
    展开全文
  • 文本两端对齐方式

    2016-08-25 10:44:23
    有时候在项目中会遇到文本两端对齐的一种需求,现在把代码分享过来 // // Created by open on 16/8/25. // Copyright © 2016年 LCB. All rights reserved. // #import "UILabel+MiddleAliment.h" #...
  • distribute-all-lines :两端对齐行的方式与distribute相同,也同样不包含两段对齐段落的最后一行,适用于表意字文档 ; inter-ideograph : 为表意字文本提供完全两端对齐。他增加或减少表意字和词间的空格 。
  • 两端对齐在导航nav的制作中非常常用,那么如何实现两端对齐效果?下面本篇文章就来给大家介绍一下使用CSS实现文字两端对齐效果的方法,希望对大家有所帮助。想要实现文字两端对齐效果,可以使用CSS的text-align属性...
  • html文本对齐两端对齐 作者 克里斯·科耶尔 已发表 2013年6月3日 翻译自: https://css-tricks.com/grids-with-text-align-justify/html文本对齐两端对齐
  • CSS代码 .box { width: 100%; /* 因为 content 会另起一行,影响样式的话,height 设置为具体的值可以避免高度变高的情况 */ .../* 这里的伪元素一定要加上,不然span元素不能两端对齐 */ .box:af...
  • TextView实现分散对齐(两端对齐

    千次阅读 2016-06-23 20:09:47
    我们都知道在word中文字对齐方式有靠左、靠右、居中、分散对齐等,但是TextView中就偏偏没有分散对齐这个属性设置。这就导致了TextView中一段文字会出现右边参差不齐的问题,中文由于每个字等宽看起
  • 文字两端对齐 text-align: justify 单行文字两端对齐 text-align-last:justify; text-align:justify; text-justify:distribute-all-lines; // 这行必加,bai兼容ie浏览器
  • 两端对齐的TextView

    2017-07-31 10:02:01
    AndroidStudio项目,两端对齐的TextView
  • 曾经一直没太注意word中左对齐和两端对齐的效果区别。在网上查找,也大都没给出效果实例,或者转抄解答居多。 我这里还是用实际的对齐效果图片展示一下具体的区别:
  • auto :允许浏览器用户代理确定使用的两端对齐法则 inter-word :通过增加字之间的空格对齐文本。该行为是对齐所有文本行最快的方法。它的两端对齐行为对段落的最后一行无效 newspaper : 通过增加或减少字或字母之间的...
  • 文本两端对齐显示

    2013-03-25 16:15:21
    把本本放于一个文本文档中,然后按行按两端对齐显示,长度小于一半的左对齐
  • css3,居中文字,居中对齐,文字两端对齐 一.文字居中对齐: 1.text-align:center; 二.文字两端对齐: 1.text-align:justify;
  • 主要介绍了Android TextView两端对齐解决办法的相关资料,需要的朋友可以参考下
  • 文本两端对齐

    2013-07-01 17:26:52
    文本两端对齐
  • 虽然网上流行“两端对齐”这种说法,但实际上没有文字段两端对齐的明确定义。所谓的“文字段两端对齐”其实质上都是“文字段分散对齐”即这个定义:style="text-align:justify;text-justify:distribute-all-lines...
  • word两端对齐、分散对齐.docx
  • 1、文字左对齐 text-align: left; 2、文字右对齐 text-align: right; 3、文字居中对齐 text-align: center; 4、文字两端对齐 text-align:justify;
  • TextView 两端对齐Android上实现类似Word上那样两端对齐的样式,网上找了两个试了下挺不错的,AlignTextView和android-justifiedtextview。不过有点小问题, 有下面问题: justifiedtextview显示一个url链接时会...
  • 两端对齐的三种方式

    2020-06-12 15:56:08
    两端对齐的三种方式 flex实现 .body { /*flex 使用*/ display: flex; justify-content: space-between; } 内联元素方式实现 .body4{ /* 内联元素*/ text-align: justify; } .body4:after{
  • HTML如何让文本两端对齐

    万次阅读 2018-03-15 00:00:59
    之前看一个外文网站,貌似都不是两端对齐,我想把他转换为PDF文件下载下来。不是两端对齐看起来太难受了。找了个方法。 Solution &lt;p style="text-align:justify; text-justify:inter-ideograph;&...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 74,713
精华内容 29,885
关键字:

对齐方式两端对齐