css文本换行的问题
今天敲代码的时候发现了一个一直都没太注意的小问题,当我在一个200px的div中写了一长串的‘f ‘时发现没有换行

但加上空格或标点符号后就能自动换行

原来浏览器把它当成了一串完整的单词,所以默认不换行,只有在一个单词的结尾才会自动换行,所以这里就需要强制还行,用word-wrap:break-word;就可以实现:

css文本换行的问题的更多相关文章
- css文本换行相关属性及解释
本文摘自 http://www.wufangbo.com/css-qiang-zhi-huan-hang/ 强制换行与强制不换行用到的属性 我们一般控制换行所用到的CSS属性一共有三个:word-wr ...
- css文本换行你所不知道的技巧
前言:这是最近翻译的一篇文章 我在header标签开头忘里边加入一个span标签的时候,有一点小问题.我总是想确保在span标签之前能够换行.明确地讲,在标签前边加入<br> 并没有什么错 ...
- css 文本换行 文本溢出隐藏用省略号表示剩下内容
正常文本的显示 <style> p{ width: 300px; box-shadow: 0 0 10px #ccc; padding: 0 20px; margin: 20px 100p ...
- css文本超出部分省略号&CSS强制换行总结
word-break:break-all单词截断自动换行 word-break:break-all 例如div宽200px,它的内容就会到200px自动换行,如果该行末端有个英文单词很长(congra ...
- css 实现文本换行及显示不下隐藏显示省略号
CSS文本超出2行就隐藏并且显示省略号 转载:https://www.cnblogs.com/wyaocn/p/5830364.html 今天做东西,遇到了这个问题,百度后总结得到了这个结果. 首 ...
- CSS学习笔记:文本换行显示(word-wrap)
在CSS3中新定义了文本换行属性,word-wrap: nomal属性值表示控制连续文本换行. break-word属性值表示内容将在边界内换行.如果需要,词内换行(word-break)也会发生. ...
- 【css】正确的让文本换行
通常文本换行我们会使用word-break属性,有两个值供我们选择 word-break: break-all; word-break: break-world; 那么如何区分这两个值呢,我们看图说话 ...
- css文本是否换行
关于文本换行有三个属性: white-space word-break word-wrap white-space normal 默认.空白会被浏览器忽略 pre 空白会被浏览器保留.其行为方式类似 ...
- 文本换行word-wrap、word-break与white-space
本文同步至微信公众号:http://mp.weixin.qq.com/s?__biz=MzAxMzgwNDU3Mg==&mid=401671055&idx=1&sn=b88c9 ...
随机推荐
- packettotal.com - PacketTotal - A Free Online PCAP Analysis Engine
找相似的pcap文件:https://packettotal.com/app/analysis?id=aff96903aae4b73364e027c8a3e85060&name=similar ...
- 机器学习: R-CNN, Fast R-CNN and Faster R-CNN
做语义分割的大概都知道这几篇文章了,将一个传统的计算机视觉模型,用CNN一点一点的替换,直到最后构建了一个完整的基于CNN的端到端的模型.这几篇文章有一定的连贯性.从中可以看到一种研究的趋势走向. 上 ...
- PS 滤镜— —扇形warp
clc; clear all; close all; addpath('E:\PhotoShop Algortihm\Image Processing\PS Algorithm'); I=imread ...
- XML配置中 引入外部property文件
新建properties配置文件 内容如下: jdbc.driverClassName=com.mysql.jdbc.Driver jdbc.url=jdbc\:mysql\://localhost\ ...
- VirtualBox下安装MacOS11
8.键盘选中 “简体中文” -- > "拼音模式".VirtualBox安装Mac OS 10.11 ,安装日期:2016 / 5 / 14 用虚拟机装黑苹果本人也装了不下3 ...
- poj3067Japan——树状数组查找逆序对
题目:http://poj.org/problem?id=3067 利用树状数组查找逆序对. 代码如下: #include<iostream> #include<cstdio> ...
- android TextView selector点击样式改变
1.selector 从单词的意思来说:选择器,就是对你的目标的控制.selector主要是用在ListView的item单击样式和TextView和Button的点击样式. 2.主要属性介绍: an ...
- 'ascii' codec can't decode byte 0xe6 in position 0: ordinal not in range(128)
No valid host was found. There are not enough hosts available 'ascii' codec can't decode byte 0xe6 i ...
- JavaScript高级程序设计学习笔记第十一章--DOM扩展
1.对 DOM 的两个主要的扩展是 Selectors API(选择符 API)和 HTML5 2.Selectors API Level 1 的核心是两个方法: querySelector()和 q ...
- 基于Laravel框架的一个简单易学的微信商城(新手必学)
俗话说,麻雀虽小可五脏俱全呀! 今天分享的这个基于Laravel的小项目大概功能有这些: 1.实现会员登录.注册功能.数据双向验证功能.2.实现手机短信验证.邮件激活账号.邮件通知.3.ajax提交数 ...