手机号添加空格形成(3-4-4)格式

本文介绍了一种将手机号码转换为3-4-4格式的方法,并提供了一个使用TextWatcher监听器自动进行格式调整的示例。通过Java代码实现了手机号的格式化显示。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、手机号转换成3-4-4格式

public String getMobileFormat(String theMobileStr){

     return theMobileStr.substring(0,3) + "" + theMobileStr.substring(3,7) + "" + theMobileStr.substring(7);

}

二、手机号输入时自动添加空格形成3-4-4格式

  1. final EditText et_phone = (EditText) findViewById(R.id.et_phone);  
  2.         et_phone.addTextChangedListener(new TextWatcher() {  
  3.             @Override  
  4.             public void onTextChanged(CharSequence s, int start, int before, int count) {  
  5.                 if (count == 1){  
  6.                     int length = s.toString().length();  
  7.                     if (length == 3 || length == 8){  
  8.                         et_phone.setText(s + " ");  
  9.                         et_phone.setSelection(et_phone.getText().toString().length());  
  10.                     }  
  11.                 }  
  12.             }  
  13.             @Override  
  14.             public void beforeTextChanged(CharSequence arg0, int arg1, int arg2,  
  15.                     int arg3) {  
  16.                   
  17.             }  
  18.             @Override  
  19.             public void afterTextChanged(Editable arg0) {  
  20.             }  
  21.         }); 

<think>我们讨论的是如何实现inline-block元素内的文本两端对齐。根据引用内容,两端对齐通常使用text-align:justify,但针对单行文本或不同浏览器可能需要特殊处理。关键点:1.对于inline-block元素,设置text-align:justify可以使文本两端对齐,但要求文本超过一行(或使用一些技巧使单行文本也两端对齐)。2.对于单行文本,由于两端对齐要求文本分布在整行,所以单行文本两端对齐需要特殊处理(比如在文本后面添加一个空白占位元素,使其宽度100%,这样这一行就被认为是多行,从而触发两端对齐效果)。根据引用[1]和引用[3]中的方法,我们可以采用以下方式:方法1(适用于单行文本):-在文本后面添加一个空的inline-block元素,并设置其宽度为100%,这样就会将文本“挤”到上一行,形成两行(第一行是文本,第二行是空白元素),然后对容器设置text-align:justify,就可以让单行文本两端对齐。-注意:需要设置容器的text-align-last:justify(用于最后一行对齐)以及一些浏览器前缀。方法2(使用伪元素):-如引用[3]中所示,在容器后面添加一个伪元素,设置content:"",并设置为inline-block,宽度100%。这样也可以实现单行文本的两端对齐。方法3(使用text-align-last):-直接设置text-align-last:justify,但是兼容性需要注意(IE9+,Firefox,Chrome20+等)。然而,我们这里要求是inline-block元素内的文本两端对齐。注意:inline-block元素本身可以设置宽度,文本在其内部对齐。步骤:1.将元素设置为inline-block,并设置宽度(因为两端对齐需要在一个确定的宽度内)。2.设置text-align:justify。3.对于单行文本,使用伪元素技巧(方法2)或添加一个空的span并设置宽度100%(方法1)来触发两端对齐。下面我们分别给出多行文本和单行文本的解决方案。多行文本两端对齐(自然多行):-只需要设置text-align:justify即可。单行文本两端对齐:-需要额外使用技巧(伪元素或空元素)。代码示例(单行文本两端对齐):方法1:使用空元素(引用[1]的方法)方法2:使用伪元素(引用[3]的方法)由于用户要求的是inline-block,我们以inline-block元素为例。示例1:使用空元素(适用于单行)```html<style>.justify-container{display:inline-block;width:200px;/*需要固定宽度*/text-align:justify;/*两端对齐*/border:1pxsolid#ccc;/*为了显示边界*/}.justify-containeri{display:inline-block;width:100%;height:0;line-height:0;/*避免占高度*/}</style><spanclass="justify-container">这是要两端对齐的文本<i></i></span>```示例2:使用伪元素(推荐,不需要额外标签)```html<style>.justify-container{display:inline-block;width:200px;text-align:justify;border:1pxsolid#ccc;}/*针对webkit浏览器,使用伪元素*/.justify-container:after{content:&#39;&#39;;display:inline-block;width:100%;}</style><spanclass="justify-container">这是要两端对齐的文本</span>```但是,注意:伪元素方法在引用[3]中使用了媒体查询来针对chrome,实际上现代浏览器大多支持。另外,为了更好的兼容性,可以上text-align-last:justify,但是注意伪元素仍然需要。另外,引用[3]中还提到了text-justify属性,这个属性在IE中用于指定两端对齐的规则,我们可以上以增强IE的支持。因此,改进的代码(考虑兼容性):```css.justify-container{display:inline-block;width:200px;text-align:justify;/*标准方法*/text-align-last:justify;/*最后一行对齐,对于单行来说就是这一行*/-moz-text-align-last:justify;/*兼容Firefox*/-webkit-text-align-last:justify;/*兼容Chrome*/text-justify:distribute-all-lines;/*兼容IE6-8,但是IE6-8可能不支持text-align-last*/border:1pxsolid#ccc;}/*针对webkit,使用伪元素(因为部分webkit浏览器可能text-align-last不支持或支持不完善)*/.justify-container:after{content:&#39;&#39;;display:inline-block;width:100%;}```注意:text-align-last:justify;已经可以处理单行文本的两端对齐,但是在一些旧版浏览器中,我们仍然需要伪元素来触发。对于多行文本,我们不需要伪元素,因为多行文本在设置text-align:justify后会自动两端对齐(除了最后一行)。如果我们希望最后一行也两端对齐,可以设置text-align-last:justify,但通常最后一行是左对齐(默认)。所以多行文本的两端对齐,通常我们只希望非最后一行两端对齐,最后一行按需处理。总结:1.对于inline-block元素内的单行文本两端对齐,使用text-align:justify配合伪元素(或空元素)以及text-align-last:justify。2.对于多行文本,设置text-align:justify即可,最后一行默认不会两端对齐(除非设置了text-align-last:justify)。用户问题:如何实现inline-block文本的两端对齐。根据上述,我们给出两种场景的示例。下面是一个完整的示例,包括单行和多行:单行文本两端对齐:```html<!DOCTYPEhtml><html><head><style>.inline-block-justify{display:inline-block;width:200px;text-align:justify;text-align-last:justify;-moz-text-align-last:justify;-webkit-text-align-last:justify;text-justify:distribute-all-lines;/*ForIE*/border:1pxsolid#999;margin-bottom:10px;}/*使用伪元素触发单行文本的两端对齐(确保兼容性)*/.inline-block-justify:after{content:&#39;&#39;;display:inline-block;width:100%;}</style></head><body><divclass="inline-block-justify">姓名</div><br><divclass="inline-block-justify">工作单位</div></body></html>```多行文本两端对齐(不处理最后一行):```html<divstyle="display:inline-block;width:200px;text-align:justify;border:1pxsolid#999;">这里是多行文本,当文本超过一行时,除了最后一行外,其他行都会两端对齐。注意最后一行不会两端对齐,除非特别设置。</div>```注意:多行文本中,如果希望最后一行也两端对齐,可以上text-align-last:justify,但这样可能不符合排版习惯。相关问题:1.如何实现多行文本的最后一行两端对齐?2.text-align-last属性的浏览器兼容性如何?3.除了text-align:justify,还有哪些方法可以实现两端对齐?</think>### CSS 实现 inline-block 文本两端对齐方法 在 CSS 中实现 `inline-block` 元素的文本两端对齐,核心是使用 `text-align: justify` 配合特殊技巧处理单行文本的对齐问题。以下是具体实现方法和代码示例: #### 方法 1:伪元素触发对齐(推荐) ```html <div class="inline-block-container"> <span class="justified-text">姓名</span> <span class="justified-text">工作单位</span> </div> ``` ```css .justified-text { display: inline-block; /* 关键属性 */ width: 100px; /* 固定宽度 */ text-align: justify; /* 基础对齐 */ text-align-last: justify; /* 最后一行对齐 */ vertical-align: top; /* 防止基线对齐问题 */ } /* 伪元素触发对齐(关键技巧) */ .justified-text:after { content: ""; display: inline-block; width: 100%; } ``` #### 方法 2:空元素占位法 ```html <div class="inline-block-container"> <span class="justified-item"> 姓名<i></i> <!-- 空元素占位 --> </span> </div> ``` ```css .justified-item { display: inline-block; text-align: justify; width: 80px; } .justified-item i { display: inline-block; width: 100%; /* 关键:占满宽度触发对齐 */ height: 0; /* 隐藏占位元素 */ visibility: hidden; } ``` #### 方法 3:兼容旧版浏览器的方案 ```css .justified-text { display: inline-block; text-align: justify; text-justify: distribute-all-lines; /* IE6-8 支持 */ text-align-last: justify; -moz-text-align-last: justify; /* Firefox */ -webkit-text-align-last: justify; /* Chrome/Safari */ width: 120px; } /* Chrome 特殊处理 */ @media screen and (-webkit-min-device-pixel-ratio:0) { .justified-text:after { content: ""; display: inline-block; width: 100%; } } ``` ### 实现原理说明 1. **`text-align: justify`** 基础文本对齐属性,但**对单行文本无效**(这是需要特殊技巧的原因)[^2][^4] 2. **伪元素/空元素的作用** 通过添加 100% 宽度的元素,强制浏览器将单行文本视为"多行内容",从而激活两端对齐效果[^1][^3] 3. **浏览器兼容处理**: - 现代浏览器:使用 `text-align-last: justify` - IE6-8:使用 `text-justify: distribute-all-lines` - WebKit 内核:伪元素方案 ### 注意事项 1. **必须设置宽度** `inline-block` 元素需要明确宽度(px/% 均可),否则无法计算对齐空间 2. **中文文本处理** 中文字符间需添加空格(` `)才能正确分散对齐: ```html <span>姓 名</span> <!--空格更大的间距 --> ``` 3. **对齐失效场景** 当容器宽度小于文本最小宽度时,两端对齐会失效,建议添加: ```css .justified-text { overflow: hidden; white-space: nowrap; } ``` ### 示例效果 ```html <!DOCTYPE html> <html> <head> <style> .container { border: 1px solid #ccc; padding: 15px; width: 300px; } .justified-item { display: inline-block; width: 80px; text-align: justify; text-align-last: justify; margin-right: 20px; border: 1px dashed #eee; } .justified-item:after { content: ""; display: inline-block; width: 100%; } </style> </head> <body> <div class="container"> <span class="justified-item">姓名</span> <span class="justified-item">手机号</span> <span class="justified-item">工作单位</span> </div> </body> </html> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值