html中隐藏溢出怎么写,CSS溢出文字隐藏

1.word-break使用(通常用在英文句子上)

word-break有三种：

a. break-all(允许在单词内换行)

b. normal(使用浏览器默认的换行规则)

c. keep-all(保持单词完整性，只能在半角空格或连字符处换行)

2.white-space

a. normal (默认。空白会被浏览器忽略。)

b. nowrap(文本不会换行，文本会在在同一行上继续，直到遇到

标签为止。)

3.text-overflow文字溢出

a. clip (直接裁剪超出的文本)

b. ellipsis (显示省略符号来代表被修剪的文本)

综合例子：

溢出文字

.left ,

.middle ,

.right {

width: 400px;

height: 400px;

border: 1px solid blue;

float: left;

margin-left: 10px;

}

.left div,

.middle div,

.right div{

width: 160px;

height: 30px;

border: 1px solid red;

margin-top: 20px;

}

.left div:first-child{

word-break: break-all;

}

.left div:nth-child(2){

word-break: normal;

}

.left div:nth-child(3){

word-break: keep-all;

}

.middle div:first-child{

white-space: normal;

}

.middle div:nth-child(2){

white-space: nowrap;

}

.right div:first-child{

white-space: nowrap;

overflow: hidden;

text-overflow: clip;

}

.right div:nth-child(2){

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

}

today is a beatiful day.

today is a beatiful d-ay.

美国加利福尼亚州州长加文·纽瑟姆19日宣布“居家令”

效果如下图

image.png

html中隐藏溢出怎么写,CSS溢出文字隐藏相关推荐

css 设置文字隐藏
css 设置文字隐藏设置display: none:但是这个设置后,后面的字体将会向前移动:就是隐藏之后不占位置: 设置opacity: 0 :会被子元素继承,但是不能设置子元素opacity:0来 ...
html中斜体样式怎么写,css斜体样式怎么写
在css中,可以使用"font-style"属性来实现文字斜体样式,语法"font-style:italic|oblique",其中italic是斜体样式,ob ...
html中斜体样式怎么写,css如何设置字体为倾斜样式？
css如何设置字体为倾斜样式?下面本篇文章就来给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 在CSS中,可以通过设置font-style属性的值为italic(斜体 ...
html中隐藏溢出怎么写,html溢出隐藏代码 css+div 溢出隐藏无效
css+div 溢出隐藏无效隐藏图片超出div部分代码如何写的? 把图片作为div的背景图片是最容易实现你所要的效果的方式: 如果一定要用img标签那就要css和js结合才能实现了: 请html代 ...
html中collapse代码怎么写,CSS 面试题: 手写 collapse(折叠) 的 css/html 部分
注意根据@_小白_的建议,用input配合伪类实现效果更好, 我实现了一下, 但是在微信小程序不好使(微信的input标签的type不支持值为checkbox或radio), 所以暂时这个阶段, 处 ...
html5中底部对齐怎么写,css设置元素底部垂直对齐
css中怎么让div里面的文字底部对齐两种办法,第一种可以作为默认选择.两种办法都可以让文字底部对齐. css如何使div里面的文字垂直对齐页面里有五段文字/图片,我想使每个部分的文字,像旁边的图 ...
html中的下拉列表怎么写,css下拉列表怎么做？
CSS是一种定义样式结构如字体.颜色.位置等的语言,被用于描述网页上的信息格式化和现实的方式.CSS样式可以直接存储于HTML网页或者单独的样式单文件. 使用CSS创建一个鼠标移动上去后显示下拉菜单的 ...
html中左右浮动怎么写,css 浮动(float)页面布局
[第一步整体布局与公共CSS定义]我们先来分析一下这个页面页面主要分5大块,顶部的Logo.导航条Nav.Banner.Content.Footer,如下图下载 (116.12 KB) 2009 ...
在html中双虚线怎么写,CSS虚线实现方法及多种应用实例
很多 CSS 初学者在前端开发过程中,经常会用到 CSS 虚线样式,但是不知道 CSS 虚线样式该如何实现,比如一个 CSS 这样写:border-style:dotted solid double ...
html中盒子浮动怎么写,CSS盒子的浮动
在标准流中,一个块级元素在水平方向会自动伸展,直到包含它的元素的边界:而在竖直方向和兄弟元素依次排列,不能并排.使用"浮动"方式后,块级元素的表现就会有所不同. CSS中有一个fl ...

html中隐藏溢出怎么写,CSS溢出文字隐藏

html中隐藏溢出怎么写,CSS溢出文字隐藏相关推荐

最新文章

热门文章