css自动换行如何设置?url太长会撑开页面

  我们更新文章时如果有引用其他文章一般会带一个原文url,但这个链接如果太长的话会把内容的版块撑开,整个排版乱了。那我们能不能设置css自动换行呢?如下图所示,其实只要两个样式就能搞定

word-wrap:break-word;
word-break:break-all;

  word-wrap用来控制换行
  两种取值:
  (1)normal 
  (2)break-word(此值用来强制换行,内容将在边界内换行,中文没有任何问题,英文语句也没问题。但是对于长串的英文,就不起作用。)

  word-break用来控制断词
  三种取值:
  (1)normal
  (2)break-all(是断开单词。在单词到边界时,下个字母自动到下一行。主要解决了长串英文的问题。)
  (3)keep-all(是指Chinese, Japanese, and Korean不断词,一句话一行,可以用来排列古诗哟~)

时间: 2024-11-03 03:28:11

css自动换行如何设置?url太长会撑开页面的相关文章

用Ajax调用web api,解决URL太长的问题;

本来是用的WCF,但是服务需要多种方式调用(后台+前端Ajax),最终局面就是我在WCF每个服务中都判断一下↓ #region 解决接收不到Ajax中传来的参数... if (jsonParames == null && HttpContext.Current.Request.QueryString["参数"] != null) jsonParames = HttpContext.Current.Request.QueryString["参数"];

URL太长导致参数被截断的问题

做Web开发时经常涉及到页面之间的转跳,页面之间的转跳就会涉及到页面之间参数的传递,通过URL传递参数是常用的方法之一,但是微软 说:"Maximum URL length is 2,083 characters in Internet Explorer",也就是说URL是有长度限制的. ASP.NET应用程序前台与后台的数据交换都是通过FORM表单来完成的,FORM表单提供了两种数据传输方式:GET和POST,这个两种数 据传输方式在实际传输中有很大的不同,但ASP.NET框架中已经

CSS解决无空格太长的字母,数字不会自动换行的问题

其实很简单,代码如下所示,注意 Style: <div class="detail_title" style="word-break: break-all;"><%=StringUtil.toHTML(title) %></div> 默认情况下,一个 DIV或者其他元素的文本,如果都是无文字分隔符,无空格,则不会自动换行,比如: <div class="detail_title" style="

CSS自动换行、强制不换行、强制断行、超出显示省略号

P标签是默认是自动换行的,因此设置好宽度之后,能够较好的实现效果,但是最近的项目中发现,使用ajax加载数据之后,p标签内的内容没有换行,导致布局错乱,于是尝试着使用换行样式,虽然解决了问题,但是并没有发现本质原因,本质在于,我当时获取的数据是一长串的数字,浏览器应该是对数字和英文单词处理方式相近,不会截断. 先给出各种方式,再具体介绍每一个属性. 强制不换行 p { white-space:nowrap; } 自动换行 p { word-wrap:break-word; } 强制英文单词断行

vs的一些操作技巧:在写代码时自动换行的设置

有时在写代码的时候,一行代码太长了,想换行,直接按回车键的话又会报错,怎么办?其实可以这样设置vs,就可以达到自动换行的效果啦. ? 原文地址:https://www.cnblogs.com/Teacher-Lu/p/11673048.html

Azure 因为路径太长 打包失败

错误提示 The specified path, file name, or both are too long. The fully qualified file name must be less than 260 characters, and the directory name must be less than 248 characters 解决方案 <?xml version="1.0" encoding="utf-8"?> <Pro

工作时间太长以及任务完不成的恐惧

两礼拜前完成一个微信公众号需求,准备推广时,主管说只能在微信打开不利于推广,要兼容 web 端.我抱有抵触心理,因为之前的架构和微信网页授权得到的 openid 纠缠的很紧密,我感觉适配 web 端要对项目进行天翻地覆的改变,刚好又是年底,感觉时间太紧.刚好此时又有一个新项目,我就参与新项目去了. 5天前,做新项目做到中途,又提起要去做兼容 web 端.没办法,只能去做了. 遇到更换支付方式为支付宝的问题,弄了一天时间弄好.这个等我另写一篇说明支付宝等支付方式的对接. 然后就重构,改表.之前是

css网页中设置背景图片的方法详解

css网页中设置背景图片的方法详解 在css代码中设置背景图片的方法,包括背景图片.背景重复.背景固定.背景定位等 用css设置网页中的背景图片,主要有如下几个属性: 1,背景颜色 {background-color:数值}2,背景图片 {background-image: url(URL)|none}3,背景重复 {background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}4,背景固定 {background-attachment

CSS四种设置方式

上面这张思维导图已经大概的讲明白了四种设置方式的不同点,下面就细入说明一下各自的用法和注意点. 1.嵌入样式表 <html> <head> <title>CSS四种设置方式</title> </head> <body> <p style="color:red;font-size:2cm;background-color:gray; border:2px solid blue">内联样式表</p&g