html溢出文本代码,html文本溢出(示例代码)

关于溢出:

1、溢出属性(容器的)

overflow:visible/hidden(隐藏)/scroll/auto(自动)/inherit;

visible:默认值,内容不会被修剪,会成现在元素框之外;

hidden:内容会被修剪,并且其余内容是不可见的;

scroll:内容会被修剪,但是浏览器会显示滚动条,以便查看其余的内容;

auto:如果内容被修剪,则浏览器会显示滚动条,以便查看其他的内容;

inherit:规定应该从父元素继承overflow属性的值。

2、空余空间

white-space:normal/pre/nowrap/pre-wrap /pre-line /inherit

该属性用来设置如何处理元素内的空白;

normal:默认值,空白会被浏览器忽略,

pre:空白会被浏览器保留,其行为方式类似HTML中的pre标签;

nowrap:文本不会换行,文本会在同一行上继续,直到遇到
标签为止;

pre-wrap:保留空白符序列,但是正常的进行换行;

pre-line:合并空白符序列,但是保留换行符;

inherit:规定应该从父元素继承White-space属性的值;(ie浏览器不支持此属性值)

3、文本溢出:text-overflow:clip/ellipsis

取值:

clip:不显示省略号(...),而是简单的裁切;

ellipsis:当对象内文本溢出时,显示省略标记;

说明:

text-overflow属性仅是...,当文本溢出时是否显示省略标记,并不具备其它的样式属性定义,要实现溢出时产生省略号的效果还需定义:

1、容器宽度:width:value;

2、强制文本在一行内显示:white-space:nowrap;

3、溢出内容为隐藏:overflow:hidden;

4、溢出文本显示省略号:text-overflow:ellipsis;

>      >

<      <

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个简单的 HTML 和 CSS 代码示例,用于创建一个基本的网页布局: ```html <!DOCTYPE html> <html> <head> <title>我的网页</title> <style> body { background-color: #f1f1f1; font-family: Arial, sans-serif; } header { background-color: #333; color: #fff; padding: 20px; text-align: center; } nav { background-color: #ccc; padding: 10px; } nav ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; } nav li { float: left; } nav li a { display: block; color: #333; text-align: center; padding: 14px 16px; text-decoration: none; } nav li a:hover { background-color: #ddd; } section { float: left; width: 70%; padding: 20px; } aside { float: right; width: 30%; padding: 20px; background-color: #ccc; } footer { background-color: #333; color: #fff; padding: 20px; text-align: center; clear: both; } </style> </head> <body> <header> <h1>欢迎来到我的网页</h1> </header> <nav> <ul> <li><a href="#">首页</a></li> <li><a href="#">关于我们</a></li> <li><a href="#">联系我们</a></li> </ul> </nav> <section> <h2>欢迎来到我的网页</h2> <p>这是一个基本的网页布局示例,使用 HTML 和 CSS 进行设计。</p> </section> <aside> <h2>侧边栏</h2> <p>这是侧边栏的内容。</p> </aside> <footer> <p>© 2021 我的网页</p> </footer> </body> </html> ``` 在这个示例中,我们使用了 HTML 来创建页面的基本结构,并使用 CSS 来设计页面的样式和布局。具体来说,我们使用了以下标签和属性: - `<html>`:定义 HTML 文档。 - `<head>`:定义文档的头部,通常包含文档的标题、样式表等信息。 - `<title>`:定义文档的标题。 - `<style>`:定义样式表。 - `<body>`:定义文档的主体。 - `<header>`:定义页面头部。 - `<nav>`:定义导航栏。 - `<ul>`:定义无序列表。 - `<li>`:定义列表项。 - `<a>`:定义链接。 - `<section>`:定义页面主要内容。 - `<aside>`:定义侧边栏。 - `<footer>`:定义页面底部。 在样式表中,我们使用了 CSS 来设置页面的背景颜色、字体、边距、对齐方式等样式。具体来说,我们使用了以下 CSS 属性: - `background-color`:设置元素的背景颜色。 - `font-family`:设置字体。 - `color`:设置文本颜色。 - `padding`:设置元素的内边距。 - `text-align`:设置文本的对齐方式。 - `list-style-type`:设置列表项的符号类型。 - `margin`:设置元素的外边距。 - `overflow`:设置元素的溢出行为。 - `float`:定义元素的浮动方式。 - `width`:设置元素的宽度。 - `text-decoration`:设置文本的装饰效果(如下划线、删除线等)。 - `:hover`:定义鼠标悬停在元素上时的样式。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值