css怎么让标点符号占半个字符

2024-10-15

巧用css text-indent减小中文标点符号的占位大小

由于设计需要,我们的页面中经常会有如下效果: 可是我们实现出来的效果确实这样的: 看起来两行文本没有对齐嘛,仔细检查后原来是[字符的原因,因为是中文标点符号占半个字的位置.不信?选中下汉字标点符号看一下即可.至于为什么会占半个字的位置,个人觉得可能是为了方便排版,标点符号也要占一个汉字的空间(想想小时候写的作文标点符号是不是都占一格).标点符号相对于格子左对齐,所以自然一侧留下一半空间.具体原因求科普!查明原因即对症下药,既然中文标点符号占汉字半个位置,那么我们使用CSStext-indent:

HTML5----CSS显示半个字符

CSS显示半个字符的基本思路: 就是一个字写两遍,分别显示一半.这里就须要用到CSS伪元素:before和:after,记住这个"伪元素"的"伪"字,表明它本来是不存在的.我们的方法就是在伪元素里放置同样的字符,仅仅显示半个,而原字符显示另外一半,最后把它们拼成一个字. 效果图: CSS: <style type="text/css"> .halfStyle { position:relative; display:inline-bl

python中文utf8编码后是占3个字符,unicode汉字为2字节

一个中文utf8编码后是占3个字符,所以求长度的函数可以这样写 def str_len(str): try: row_l=len(str) utf8_l=len(str.encode('utf-8')) +row_l except: return None return None unicode中汉字为两字节, utf-8中汉字为三字节 https://en.wikipedia.org/wiki/Unicode https://en.wikipedia.org/wiki/UTF-8

JS判断字符串长度（英文占1个字符，中文汉字占2个字符）

//计算字符串长度(英文占1个字符,中文汉字占2个字符) 方法一: String.prototype.gblen = function() { var len = 0; for (var i=0; i<this.length; i++) { if (this.charCodeAt(i)>127 || this.charCodeAt(i)==94) { len += 2; } else { len ++; } } return len; } 方法二: function strlen(str){

JS判断字符串长度，结合element el-input el-form 表单验证（英文占1个字符，中文汉字占2个字符）

首先看看判断字符串长度的几种方法(英文占1个字符,中文汉字占2个字符) 方法一: function strlen(str) { var len = 0; for (var i = 0; i < str.length; i++) { var c = str.charCodeAt(i); //单字节加1 if ((c >= 0x0001 && c <= 0x007e) || (0xff60 <= c && c <= 0xff9f)) { len++

css3 半个字符美化方法

<html lang="zh-CN"> <head> <title></title> <meta charset="UTF-8"> <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script> <style type="text/css"&g

mysql和oracle的一个汉字占几个字符

以前一直使用oracle11g,一个汉字占3个字节,所以在操作mysql时也一直这样分配长度. 今天测试了下发现不对了可以看到第一个的长度确实是15,但是第二个为什么是5? 在网上找到资料:char_length计算的是字符长度,而length计算的是字节长度,刚好我使用的是utf8,一个汉字占3个字节,占一个字符. 那好了,应该是对的上了,可是好奇心我就试了下为什么这是相同的?因为这不是汉字好了,现在知道原来mysql和oracle一样的,但是又看到一篇说mysql的varchar与or

进阶篇之纯css+字体实现五角星（半颗星）评分

1.前言之前写了一篇实现五角星打分效果的demo.这个demo用来实现打分效果绰绰有余,那么有时候我们在统计评分的时候,就会有半颗星或者1/3颗星星这样的那要如何实现呢?来来来,纯字体+css实现! 2.详情 1.下载字体 webFontIcon 我不会把压缩文件上传,会的童鞋可以教教我,感谢赐教,这样我就可以把字体上传以供大家下载了. 2.css样式 ;} *{;;} /*字体路径按照你的路径去修改*/ @font-face { font-family: 'AlluraRegular'; s

JavaScript判断字符串的字符长度（中文占两个字符）

判断方法 //判断字符串中的字符中文算两个字符 function chkstrlen(str) { ; ; i < str.length; i++) { ) //如果是汉字,则字符串长度加2 strlen += ; else strlen++; } return strlen; } 控制文本框中的字符长度 Name是这个文本框 TitleLength是这个提示文字  <script type="text/javascript&quo

JS获取字符串长度（英文占1个字符，中文汉字占2个字符）

方法一: String.prototype.gblen = function() { var len = 0; for (var i = 0; i < this.length; i++) { if (this.charCodeAt(i) > 127 || this.charCodeAt(i) == 94) { len += 2; } else { len++; } } return len; } 方法二: function getStringLen(Str) { var i, len, cod

【CSS】文字超出显示省略号&连续字符换行

方法1.多行控制(css3) .text { width: 100%; word-break: break-all; display: -webkit-box; -webkit-line-clamp:; -webkit-box-orient: vertical; overflow: hidden; } line-clamp:几行以后显示省略号(例子为2行) 方法2.单行定宽 .text-ellipsis { overflow: hidden; text-overflow: ellipsis; w

去除ZERO WIDTH SPACE 零宽字符：看不见却占位置的字符

ZERO WIDTH SPACE 由于历史原因,编码方案中保留着该类编码解决方案 1. 替换 ```js str.replace(/[\u200B-\u200D\uFEFF]/g, ''); ``` 2. 另一种替换 ```js str.replace(/\u8203/g, ''); str.replace(/\uB200/g''); ``` 3. 还有一种替换 ```js str.replace(/(^[\s\u200b]*|[\s\u200b]*$)/g, '') ``` 4. 也可以先获

JAVA中一个汉字占多少个字符（转载）

1.先说重点: 不同的编码格式占字节数是不同的,UTF-8编码下一个中文所占字节也是不确定的,可能是2个.3个.4个字节: 2.以下是源码: 1 @Test 2 public void test1() throws UnsupportedEncodingException { 3 String a = "名"; 4 System.out.println("UTF-8编码长度:"+a.getBytes("UTF-8").length); 5 Sys

[Mac]如何让两个窗口各占半个屏幕

OS X中的拆分视图El Capitan或更高版本允许您使用两个应用程序填充Mac屏幕,而无需手动移动和调整窗口大小. 进入拆分视图按住窗口左上角的全屏按钮 . 当您按住按钮时,窗口会缩小,您可以将其拖动到屏幕的左侧或右侧. 释放按钮,然后单击另一个窗口以开始并排使用两个窗口. 如果您已经在全屏视图中有一个窗口,您仍然可以与另一个窗口并排查看.只需打开 Mission Control,然后将窗口拖到屏幕顶部的全屏应用程序的缩略图上. 需要更多屏幕空间才能进入拆分视图的应用程序可能会显示一

如何调整word中表格某一列占半分比

1.可以拖动,但是不准确 2.

CSS样式中标点符号的作用

http://www.cnblogs.com/65876951/archive/2011/09/20/2182239.html

【小实现】css after+border实现标签半菱形

<!DOCTYPE html> <html lang="en"> <head> <style> .span-line-begin { background-color: blue; position: relative; margin-right: 8px; } .span-line-begin:after { content: ""; position: absolute; display: inline-block

css 始终让图片占满自适应盒子（图片不失真）

要去上班了,时间比较紧,先把代码粘出来,原理慢慢讲我来了,今天是农历七月八日,昨天是七夕,不知道为什么,突然通知放假半天(嘎嘎),好吧,没什么!!!走到半路的我看到通知,立马撤了.正好回来把这个原理补上. 一般情况下,网页嵌入人物图片,是必须要按比例缩放的,不像一般的图片操作起来比较简单. 1.设置盒子的宽. 2.给盒子加:before(主要是为了把盒子撑开),设高为图片高(相对父盒子设置百分比). 3.设置图片为绝对定位(top:0;). 4.必须设置图片宽高100%.

前端工程师技能之photoshop巧用系列第二篇——测量篇

× 目录 [1]测量信息 [2]实战 [3]注意事项前面的话前端工程师使用photoshop进行的大量工作实际上是测量.本文是photoshop巧用系列第二篇——测量篇测量信息在网页制作中需要使用photoshop测量的信息分为两类,分别是尺寸信息和颜色信息 [1]尺寸信息尺寸信息主要通过矩形选框工具配合信息面板进行测量,共包括以下项目: 1.宽度.高度 2.内边距.外边距 3.边框 4.定位 5.文字大小 6.行高 7.背景图位置 [注意]测量时,画布放得尽可能大,这样结果才相对更准

Ubuntu 14.04 安装 Sublime Text 3

1. 实验环境 Ubuntu 14.04 + Sublime text 3 2. sublime text介绍 ublime Text 是一款流行的文本编辑器软件,有点类似于TextMate,跨平台,可运行在Linux,Windows和Mac OS X.也是许多程序员喜欢使用的一款文本编辑器软件. Sublime Text 3主要特色: -语法高亮.代码提示补全.代码折叠.自定义皮肤/配色方案.多便签 -代码地图.多种界面布局与全屏免打扰模式 -灵活的插件支持 3.安装步骤 3.1 在Ubunt

css怎么让标点符号占半个字符

热门专题