文字单行两端对齐效果

<style>    .li{line-height:30px;overflow:hidden;width:200px;height:30px;text-align:justify;text-align-last:justify;border:1px solid black;}    .li:after{display:inline-block;overflow:hidden;width:100%;height:0;content:‘‘;}</style>

<ul style="height:100px">    <li class="li">我是谁</li>    <li class="li">你又是谁</li>    <li class="li">世界末日2012</li></ul>
时间： 2024-10-11 02:39:24

文字单行两端对齐效果的相关文章

css实现两端对齐效果

CSS实现两端对齐效果 两端对齐,从概念上来说,其实不难理解.如果不明白什么叫两端对齐,可以玩玩word等办公软件. 下面谈谈如何实现文本的两端对齐.我所知道的大概有以下几种方法 text-align w3school指出,text-align用于设置块级元素内文本的水平对齐方式.如果想使inline元素或inline-block元素居中对齐,可以使用text-align: center方法,对于block元素无法使用text-align实现居中对齐.如果想让block元素居中对齐,可以使用ma

写的一个段落标签文字内容两端对齐的代码

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="

大神都未必解决的了简单问题，关于文字左右两端对齐。

今天遇到一个很棘手的问题,问题如下: 领导的一句话,小弟们就得忙前忙后,不顾后果和代价的干!开始想到的解决方案是:调宽度.调字体大小.调字体间距.用br换行.用<pre>静态写死...总之各种调,几经奔溃. 终于...终于找到你: text-align:justify; //文本完全两端对齐.                             text-justify:inter-ideograph; //ie hack 为表意字文本提供完全两端对齐.                  

如何用css实现一段文字的两端对齐和分散对齐

<style>.distribCol1{text-align:justify; text-justify:distribute-all-lines; text-align-last:justify; text-indent:10px; width:140px}</style><div class="distribCol1">你要写的东西</div>

CSS两端对齐

flex 弹性盒模型flex作为强大的弹性布局方式,可以hold住大部分的布局效果,当然也包括两端对齐.可以使用主轴对齐justify-content的两端对齐属性space-between justify-content: space-between; 如果要考虑flex三个版本的兼容,则使用如下代码 [注意]IE9-浏览器不支持 .justify-content_flex-justify{     -webkit-box-pack: justify;     -ms-flex-pack: j

可用的CSS文字两端对齐

最近在工作项目中接触到Web界面设计的问题,要实现文字两端对齐的效果.在网上搜索了一下,用的都是类似的技巧: text-align:justify;text-justify:inter-ideograph; 我遇到问题是:看不到效果,无论是英文还是中文,在IE和chrome下都不起作用.还好在StackOverflow上找到了解决方法 :) 样式: 1 div.justify 2 { 3 text-align: justify; width:200px; font-size:15px; colo

Android - 实现两端对齐的文字排版

要实现Android两端对齐的文字排版效果,我们当然可以继承原有的TextView来实现,但一个更简单的方式就是使用WebView,利用HTML样式来实现. 首先定义一个String常量,我们可以将它视为一个HTML模板: private static final String WEBVIEW_CONTENT = "<html><head></head><body style=\"text-align:justify;margin:0;\&qu

实现段落文字两端对齐的css样式

有时候网站中的文字比较多,虽然为父元素设置了宽度,但是总是会出现两端参差不齐的情况,看起来不整齐.其实实现段落的两端对齐,只需要设置两个css 样式即可. .demo{ text-align: justify; text-justify: inter-ideograph;/*IE*/ } text-justify基本语法 语法:text-justify : auto |inter-word | newspaper | distribute | distribute-all-lines | int

【】小技巧】CSS文字两端对齐

需求如下,红框所在的文字有四个字的.三个字的.两个字的,如果不两端对齐可以选择居中对齐,或者右对齐.但是如果要像下面这样两端对齐呢? 我相信以前很多人都这么干过:两个字中间使用 来隔开达到四个字的宽度,三个字也可以,但是,像上图中“122账号”“122密码”这样的,就不好计算该用几个空格了. 假如我们有如下HTML: <div>这世间唯有梦想和好姑娘不可辜负!</div> 给它加点样式 div{ width:500px; border:1px solid red; text-ali