native react 首行缩进 - CSDN
精华内容
参与话题
  • 设置首行缩进

    千次阅读 2016-07-27 15:36:17
    主要使用TextKit方法。 具体代码如下:NSMutableParagraphStyle *paraStyle01 = [[NSMutableParagraphStyle alloc] init]; paraStyle01.alignment = NSTextAlignmentLeft; //对齐 paraStyle01....//行首缩进

    主要使用TextKit方法。
    具体代码如下:

    NSMutableParagraphStyle *paraStyle01 = [[NSMutableParagraphStyle alloc] init];
        paraStyle01.alignment = NSTextAlignmentLeft;  //对齐
        paraStyle01.headIndent = 0.0f;//行首缩进
        paraStyle01.firstLineHeadIndent = 24.0f;//首行缩进
        NSAttributedString *attrText = [[NSAttributedString alloc] initWithString:@"首行缩进首行缩进首行缩进首行缩进首行缩进首行缩进首行缩进首行缩进首行缩进首行缩进首行缩进首行缩进首行缩进首行缩进首行缩进首行缩进首行缩进首行缩进首行缩进首行缩进首行缩进首行缩进首行缩进" attributes:@{ NSParagraphStyleAttributeName : paraStyle01}];
    
        UILabel *_content = [[UILabel alloc] initWithFrame:CGRectMake(0,20, 200, 30)];
        _content.numberOfLines=0;
        _content.font = [UIFont systemFontOfSize:12];
        _content.backgroundColor = [UIColor redColor];
        _content.attributedText = attrText;
        [self.view addSubview:_content];

    效果图:
    这里写图片描述

    展开全文
  • react native Text组件首行缩进

    千次阅读 2020-03-31 10:06:56
    中文段落一般都会有首行缩进。然而react native的Text组件并没有直接提供相关的配置属性。 在最近的开发中遇到了一个看似简单的需求,要实现如下图的效果 重点是需要在标题的左边添加一个分类的标识,而这个标识不...

    中文段落一般都会有首行缩进。然而react native的Text组件并没有直接提供相关的配置属性。

    在最近的开发中遇到了一个看似简单的需求,要实现如下图的效果
    在这里插入图片描述
    重点是需要在标题的左边添加一个分类的标识,而这个标识不能直接使用Text嵌套实现。因为这个标识区域是有边框的。

    有人可能会问为什么不直接使用marginLeft呢?那将会是另一种效果,如下图所示
    在这里插入图片描述
    为了实现上述需求,我的思路是对标题进行首行缩进,空出相应的空间进行标识的绘制。

    空格占位符

    空格占位符相对于Text组件内的字符串来说可以根据情况设置不同的缩进宽度。比如常见的首行缩进2字符,就可以使用  来进行设置。以下是不同宽度的空格占位符的清单:

      == 普通的英文半角空格
      ==   ==   == no-break space (普通的英文半角空格但不换行)
      == 中文全角空格 (一个中文宽度)
      ==   == en空格 (半个中文宽度)
      ==   == em空格 (一个中文宽度)
      == 四分之一em空格 (四分之一中文宽度)
    

    使用方法

    <Text> &emsp;&emsp;
        {`这是一个文本。slice(start,end) 方法用于提取字符串的某个部分(从参数 start 到 end 位置),并以新的字符串返回被提取的部分。类似 substring()。`}
    </Text>
    

    说明:

    占位符不能在Text组件的“{}”中使用。
    占位符之后一定要添加“;”

    案例

    <View style={{flexDirection:'row',alignItems:'center'}}>
        <Text style={styles.titleStyle} numberOfLines={2}>&emsp;&emsp;&ensp;{`测试标题,这个标题可以很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长`}</Text>
        <View style={styles.classNameBox}>
            <Text style={{fontSize:Size(12),color:'#4595FF'}} numberOfLines={1}>
                {`${classname&&classname.slice(0,2)}`}
            </Text>
        </View>
    </View>
    
    titleStyle:{
        flex: 1,
        color:"#28314E",
        fontSize:Size(18),
        lineHeight:22,
        marginVertical:Size(15),
        fontWeight:"bold"
    },
    
    classNameBox: {
        position: 'absolute',
        width: Size(36),
        height: Size(20),
        marginTop: 15,
        alignSelf: 'baseline',
        borderWidth: StyleSheet.hairlineWidth,
        borderColor: '#4595FF',
        justifyContent: 'center',
        alignItems: 'center',
    },
    
    
    展开全文
  • 由于markdown语法主要考虑的是英文,所以对于中文的首行缩进并不太友好,两种方法都可以完美解决这个问题。 把输入法由半角改为全角。 两次空格之后就能够有两个汉字的缩进。 在开头的时候,先输入下面的代码,然后...

      由于markdown语法主要考虑的是英文,所以对于中文的首行缩进并不太友好,两种方法都可以完美解决这个问题。

    • 把输入法由半角改为全角。 两次空格之后就能够有两个汉字的缩进。
    • 在开头的时候,先输入下面的代码,然后紧跟着输入文本即可。分号也不要掉。
      直接写

      半方大的空白&ensp;或&#8194;
      全方大的空白&emsp;或&#8195;
      不断行的空白格&nbsp;或&#160;
      亲测可行,本文中的首行缩进就是这样来的哦~
      
    展开全文
  • 属性 numberOfLines 文本行数限制,添加后超过限制行数文本会在末尾默认以…的形式省略。 ...设置文本缩略格式,配合numberOfLines使用,values: ...* clip:在末尾切割,直接切割字符无省略符 ...

    属性

    numberOfLines

    文本行数限制,添加后超过限制行数文本会在末尾默认以…的形式省略。

    ellipsizeMode

    设置文本缩略格式,配合numberOfLines使用,values:
    * tail:在末尾…省略(默认值)
    * clip:在末尾切割,直接切割字符无省略符
    * head:在前面…省略
    * middle:在中间…省略

    onPress

    点击事件

    style

    样式

    样式

    color

    字体颜色

    fontSize

    字体大小

    fontFamily

    字体

    fontStyle 字的样式

    • normal:正常
    • italic:斜体

    fontWeight 设置粗体

    • normal:正常bold:粗体100,200,300, 400, 500, 600, 700, 800, 900)

    lineHeight 行高

    textAlign 文字对其方式

    • auto:自动对齐
    • left:左对齐
    • right:右对齐
    • center:居中对齐

    textDecorationLine 下划线和删除线样式

    展开全文
  • <TextInput style={styles._text} placeholder="请输入卡号" placeholderTextColor={'#888'} underlineColorAndroid='transparent' multiline={true} ...
  • 估计你看到这个标题是懵逼的,直接上图吧! 下面那个 “退订***”那个位置好实现,可是上面那个“【签名】...后面一想,这个样子不就是所谓的首行缩进吗?直接用text-indent不就好了?! 主要布局如下:   主要c...
  • React Native编码规范

    2020-08-23 22:15:17
    React NativeReact都要尽可能的使用ES6语法。 console在调试时写,调试完立即删除。 2.签名规范 签名位置位于首行代码之上。 /* * 版权所有: 公司, 年份 * **页面 * 作者: XX * 创建时间: 年月日 * 版本 ...
  • 一、EsLint简介 ESLint 是由 Nicholas C. Zakas 编写的一个可扩展、每条规则独立、不内置编码风格、可自定义规则为理念的 Lint 工具。 在团队协作中,为避免低级错误的产生和统一代码的风格,会预先制定编码...
  • 1、介绍    ESLint 是一个可扩展,每条规则独立,被设计为完全可配置的lint工具。  可以用来检测代码,避免低级错误 ... 可以用来规范代码的开发风格,统一代码习惯。... 在开发中,可能会遇到很多不同的同事...
  • 设置了letter-spacing之后字符偏左,如图: <input type="button" class="submit-button" value="登录" v-on:click="login"/> .submit-button { display: block; width: 100%;... colo...
  • CoreText使用介绍

    2017-02-10 14:11:11
    一、概述   1.CoreText是苹果创建的一个用于文字排版的框架,可以实现文字排版、图文混排等复杂的界面效果。从iOS3.2启用。...2.一个开源工具类-OHAttributedLabel,就是使用CoreText框架实现的,能够实现一个...
  • 前端星计划Day1笔记

    2020-04-10 22:18:57
    什么是前端?解决GUI人机交互问题;跨终端;前端技术栈 ...前端关注的方面:功能、美观、性能、安全、无障碍、兼容性 需要学习的前端技能:相关编程语言、行业标准...前端的拓展:Node.js、Electron、ReactNative、...
  • mac webstorm 使用 eslint

    2019-06-08 10:28:58
    首先 在插件找到eslint 并安装 配置 解释器 和 配置文件路径 常见规则配置 “off” 或 0 - 关闭规则 “warn” 或 1 - 开启规则,使用警告级别的错误:warn (不会导致程序退出) “error” 或 2 - 开启规则,使用...
  • 静态资源优化 图片格式 和 应用场景介绍 JPEG 联合图像装甲小组是一种针对彩色照片而广泛使用的有损压缩图形格式 介绍:栅格图形。常用文件扩展名为.jpg,也有.jpeg、.jpe。JPEG在互联网上常被应用于存储和传输照片...
  • ESLint如何配置

    2020-04-05 13:01:35
    统一代码风格规则,如:代码缩进用几个空格;是否用驼峰命名法来命名变量和函数名等。 减少错误, 如:相等比较必须用 === ,变量在使用前必须被声明,在条件语句中不能使用赋值语句等。 提高代码质量,如:函数最多...
  • Flex(Flexible Box),"弹性布局"用来为盒状模型提供最大灵活性,容器默认存在“轴”,不需要浮动,生产环境常用。...Ajax异步处理,jQuery...native前端发展很快,浏览器原生API够用,you don't need jQuery由于React、Ang
1 2 3 4
收藏数 66
精华内容 26
热门标签
关键字:

native react 首行缩进