n行省略

 

 
开发过程中经常会遇到单行居中、多行居左、n行省略这样的需求。特别是一些弹窗提示信息~~ 
html

<div class="box">
    <h2>
        <p>
            <span>标题居中</span>
        </p>
    </h2>
    <div class="container">
        <p>
            <span>我是两行居左两行居左两行居左两行居左两行居左两行居左</span>
        </p>
    </div>
    <div class="container">
        <p>
            <span>我是超过两行的标题最后点号省略我是超过两行的标题最后点号省略我是超过两行的标题最后点号省略省略省略</span>
        </p>
    </div>
</div>

css

.box {
   width: 320px;
    padding: 0 10px;
    margin: 10px auto;
    background: #efefef;
    border-radius: 6px;
}
.box p {
    display: inline-block; 
    text-align: center;
}
h2,.container {
    text-align: center; // 单行时居中
    padding: 10px 0;
}
h2 span,.container span {
    text-align: left;// 文字居左
    // display: inline-block; // 不需要n行省略时
    // webkit内核下超出n行省略
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;// 2即为n
    -webkit-box-orient: vertical;
}

主要还是使用display属性

display:inline // 在同一行，并且宽度就等于文字内容的宽度且设置宽度无用
display:inline-block  // 既有行级元素的特性，也有块级元素的特性，因此在同一行，能设置宽高，margin，padding
display:block // 块级元素会自动换新行，占领一行,可以设置宽高，margin，padding

外层盒子使用文本居中 
利用元素的inline-block特性，文本设置居左。宽高都是文本内容撑起，当文本超过一行时。就会实现居左 
开发过程中，需要公共的弹窗提示信息用这个是再好不过了~只更换文本内容即可。居中、居左一步到位

3.文本均匀分布、英文换行

html

<div class="box">
    <div class="left">
        文本均匀分布:
    </div>
    <div class="right">
            这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内
    </div>
</div>

css

.box{
    width: 500px;
    margin: 100px auto;
    border: 1px solid #efefef;
    padding: 10px;
    border-radius: 6px;
}  
.left{
    width: 150px;
    height: 20px;
    float: left;
    color: #9ca8b9;
    text-align-last: justify;
}
.right{
    color: #5D6072;
    padding-left: 10px;
    overflow: hidden;
    // 解决纯英文或者数字时不换行问题
    word-break: break-all; 

}

文本均匀分布

text-align-last: justify;

单词换行 
既整个单词看成一个整体，如果该行末端宽度不够显示整个单词，它会自动把整个单词放到下一行，而不会把单词截断掉的。

word-wrap: break-word;

字母换行 
如果该行末端有个英文单词很长，它会把单词截断，变成该行末端为inter(interesting的前端部分)，下一行为esting(interesting)的后端部分了。

word-break: break-all; 

使用bfc实现左右布局 
实现文本均匀分布还可以使用flex布局，父元素盒子中使用justify-content: space-between，使用多个子元素标签，每个标签中放置一个文字，这里不做细说

标签：两行,这里,行省,text,内容,文本,display
来源： https://blog.csdn.net/weixin_43837268/article/details/94588798