CSS阻止文本选择

最新推荐文章于 2024-07-08 14:14:43 发布
最新推荐文章于 2024-07-08 14:14:43 发布
阅读量109 收藏
点赞数
原文链接：http://www.cnblogs.com/viccici/p/3992195.html
版权 
　　在日常运用中，经常遇到点击按钮/菜单的时候，选中了文本，为了避免这种情况，可以使用纯css来解决这个问题（IE10+），对于旧版本的就只能用js：onselectstart = 'return false;'这种方式。以下介绍一下-prefix-user-select：
Formal syntax: none | text | all | element 
(-prefix-)user-select: none;　　//全部都不可选择
(-prefix-)user-select: text;　　//允许文本选择
(-prefix-)user-select: all;　　//In an HTML editor, if a double-click or context-click occurred in sub-elements, the highest ancestor with this value will be selected.
(-prefix-)user-select: element;　　//只有IE ff支持，无视……

注意这属性不属于w3c标准！
　　目前主要使用的是none & text
　　假定结构如下：
<body>
    <nav>
        <dt>level 1</dt>
    </nav>    
    <p>xxxxxxxxxxxxxxxxxxxx</p>
</body>

　　CSS如下：

body{
    -webkit-user-select: none;
}    

nav dt{
    -webkit-user-select: text;
}

　　结果是：p标签的文字不能选中，dt的文字则能正常选中。

　　

 

 

 

 

转载于:https://www.cnblogs.com/viccici/p/3992195.html

                

        

        




    




    

      

        

            

              
                
                  baiqian1997
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
从零学CSS系列之文本属性

				
			

			

				

					10-25
				

			

		

		

			
				
当设置为`nowrap`时，它会阻止文本换行，让文本在一行内继续显示，直到遇到`
`标签或容器边界。这个属性常用于保持文本格式的整洁性和一致性，尤其是在包含多个空格和换行符的代码块或预格式化文本中。  通过上述...

			
		

	



                

              
                



	

		

			

				
					
通过css样式控制单元格文本超长省略

				
			

			

				

					09-25
				

			

		

		

			
				
在示例代码中，使用了一个 `<nobr>` 标签，它的作用是阻止文本换行。`title` 属性则用于提供完整的文本内容，当鼠标悬停在被省略的文本上时，用户可以看到完整的文本信息。  ```html       ; height: 18px; border: ...

			
		

	



                


  
              

                


	

		

			

				
					
css基础用法及选择器

				
			

			

				

					qh075的博客
				

				

					09-29
					
					948
					
				

			

		

		

			
				
background-repeat:no-repeat(图像不平铺)/repeat-x(x轴平铺)/repeat-y(y轴平铺)/repeat(平铺)背景平铺。background-repeat:no-repeat(图像不平铺)/repeat-x(x轴平铺)/repeat-y(y轴平铺)/repeat(平铺)背景平铺。新建css一个文件，通过在图像下方做标识，如下图。

			
		

	





	

		

			

				
					
CSS常见问题及解决（二）在active状态下屏蔽掉css中的hover效果

					
热门推荐

				
			

			

				

					baizaozao的博客
				

				

					07-07
					
					1万+
					
				

			

		

		

			
				
描述：ul中的每一个li都有hover效果（css中完成），但是在点击后（即active的class状态下），要屏蔽hover的效果










解决：li在active状态下屏蔽hover效果
在为li设置hover状态时，不要单纯的写li：hover，应该给所有的li一个hover类名（hover只是为了引申，当然可以取别的名字），当设置为active状态时，移

			
		

	



		

			
		



	

		

			

				
					
html禁止文本选择,[译]用CSS来禁止文本选择

				
			

			

				

					weixin_28908491的博客
				

				

					06-03
					
					258
					
				

			

		

		

			
				
有些时候我们需要禁止网页的部分文本不能被选择。你可以使用user-select这个CSS特性来实现这个需求。举例下面是一个使用了disable-selection类的样式规则，当它作用于一个HTML元素的时候，它会让我们不能够选择这个元素。.disable-selection{-moz-user-select:none; /* Firefox */-ms-user-select:none; /* ...

			
		

	





	

		

			

				
					
css禁用长按选中文本功能

				
			

			

				

					苦夏木禾
				

				

					04-24
					
					240
					
				

			

		

		

			
				
css禁用长按选中文本功能

			
		

	





	

		

			

				
					
html禁止双击选中文本,CSS阻止页面双击选中文本

				
			

			

				

					weixin_36145011的博客
				

				

					06-09
					
					1642
					
				

			

		

		

			
				
在双击左右箭头，快速切换图片滚动时，会选择附近区域的文字，感觉不是很好，今天在同事在分享时，讲到了这个问题， 试了一下，不错，解决了问题IE及Chrome下的方法一样，对相应的元素添加onselectstart=”return false;”但是，这个在火狐下不起作用，但是火狐下可以用css样式来达到这个效果，即添加-moz-user-select:none;就可以兼容ie，google，fire...

			
		

	





	

		

			

				
					
CSS阻止页面双击选中文本

				
			

			

				

					dizai3980的博客
				

				

					04-13
					
					228
					
				

			

		

		

			
				
http://www.w3cui.com/?p=141

当点击连续点击箭头按钮时会出现蓝色部分。这个问题也是双击选中文本引起的。



转载于:https://www.cnblogs.com/barker/p/4423059.html...

			
		

	





	

		

			

				
					
CSS 禁止滑动选择文字

				
			

			

				

					WALKMAN的博客
				

				

					11-29
					
					1419
					
				

			

		

		

			
				
这是通过CSS样式来实现的禁止用鼠标选择功能：
unselectable为IE准备
onselectstart为Chrome、Safari准备
-moz-user-select是FF的
css style:html,body{-moz-user-select: none; -khtml-user-select: none; user-select: none;onselectstart:none}...

			
		

	





	

		

			

				
					
html css如何禁止重叠,html – 如何阻止css覆盖文本

				
			

			

				

					weixin_29959015的博客
				

				

					05-31
					
					393
					
				

			

		

		

			
				
也许这是一个非常愚蠢的问题,但是当我试图扩大字体大小时,如何阻止css覆盖呢？@import url(https://fonts.googleapis.com/css?family=Fjalla+One);html{height: 100%;}body{font-family: 'Fjalla One', sans-serif;background: #2C3E50;  /* fallback f...

			
		

	





	

		

			

				
					
CSS 选择符及其继承属性详解

				
			

			

				

					My_wife_QBL的博客
				

				

					07-08
					
					2367
					
				

			

		

		

			
				
CSS 选择符是控制网页样式的基础，通过不同的选择符可以精确地选择 HTML 元素并应用样式。了解不同类型的选择符及其用法，对于编写高效、可维护的 CSS 代码至关重要。同时，理解哪些 CSS 属性是可以继承的，以及如何控制属性的继承，可以帮助我们更好地管理网页的样式。可继承属性使得样式能够在元素树中传递，而不可继承属性则提供了更精细的控制。通过本文的详细介绍，希望你能够更深入地理解 CSS 选择符及其继承属性，并在实际开发中灵活运用这些知识，提升网页设计的质量和效率。

			
		

	





	

		

			

				
					
如何使用 CSS 防止换行

				
			

			

				

					rubys007的博客
				

				

					03-09
					
					1706
					
				

			

		

		

			
				
开发人员通常喜欢在网页上对文本进行换行。换行会以某种方式限制文本，防止设计问题。文本换行还可以防止水平滚动。但有时候，您希望文本块保持在同一行，不考虑长度。您可以使用 CSS 的属性来防止特定元素的换行和文本换行。在本教程中，您将以四种不同的方式对相同的文本块进行样式设置，首先是带有换行，然后是三次不带换行：

			
		

	





	

		

			

				
					
CSS控制文本的长度 超过一行显示省略号的实现方法

				
			

			

				

					09-24
				

			

		

		

			
				
`: 该属性用于阻止文本换行，确保所有内容都在同一行内显示，这样当内容超出设定宽度时才会触发`text-overflow`的效果。  5. `overflow: hidden;`: 这个属性隐藏超出元素边界的任何内容，配合`white-space: nowrap;`...

			
		

	





	

		

			

				
					
extjs表格文本启用选择复制功能具体实现

				
			

			

				

					10-26
				

			

		

		

			
				
综上所述，实现ExtJS表格中启用文本选择复制功能需要覆盖默认的CSS样式、使用`override`修改组件默认行为、定义一个新的Feature，最后将Feature添加到Grid组件中。需要注意的是，这些代码是在ExtJS 4.0.2a版本下测试...

			
		

	





	

		

			

				
					
屏蔽IE文本选择功能

				
			

			

				

					11-09
				

			

		

		

			
				
这些CSS规则可以在不同的浏览器中实现对文本选择的控制，但需要注意的是，它们无法完全替代上述JavaScript事件，因为某些浏览器的实现细节可能略有不同。  #### 总结  通过上述方法，我们可以有效地在IE浏览器中实现...

			
		

	





	

		

			

				
					
基于Android单词识记软件APP设计与实现.docx

				
			

			

				

					08-20
				

			

		

		

			
				
基于Android单词识记软件APP设计与实现.docx

			
		

	





	

		

			

				
					
CloudEngine系列交换机 M-LAG标准化部署指南.chm

					
最新发布

				
			

			

				

					08-20
				

			

		

		

			
				
荐两层组网架构，即Spine与Server Leaf两级M-LAG组网，Spine部署双活网关。
•PE/Core与Spine间采用口字型或交叉型组网，三层对接静态路由、OSPF或BGP协议。
•两台Spine间跨板/跨子卡Eth-Trunk部署Peer-link。如果两块单板端口速率不一致，通过高速端口协商低速（100GE协商为40GE）或不同速率端口混合捆绑方式（需规划链路负载分担权重，M-LAG口不支持使用此方式）保证Peer-link的可靠性。
•部署独立三层链路作为上行链路的备份路径，同时作为M-LAG的DAD链路，在Peer-link故障后可以通过DAD链路检测对端设备是设备级故障还是端口级故障。
•Spine间互联的三层DAD链路配置为保留口（当Peer-link故障时不会被Error-down）。


			
		

	





	

		

			

				
					
vue.js+node.js+mysql在线聊天室源码

				
			

			

				

					08-20
				

			

		

		

			
				
在线聊天室源码，采用技术栈：vue.js+Element UI+node.js+socket.io+mysql，有兴趣的下载研究研究。

			
		

	





	

		

			

				
					
weixin246微信小程序书店springboot.zip

				
			

			

				

					08-20
				

			

		

		

			
				
互联网发展至今，无论是其理论还是技术都已经成熟，而且它广泛参与在社会中的方方面面。它让信息都可以通过网络传播，搭配信息管理工具可以很好地为人们提供服务。针对高校教师成果信息管理混乱，出错率高，信息安全性差，劳动强度大，费时费力等问题，采用微信小程序书店可以有效管理，使信息管理能够更加科学和规范。
微信小程序书店使用Java语言进行编码，使用Mysql创建数据表保存本系统产生的数据。系统可以提供信息显示和相应服务，其管理微信小程序书店信息，查看微信小程序书店信息，管理微信小程序书店。
总之，微信小程序书店集中管理信息，有着保密性强，效率高，存储空间大，成本低等诸多优点。它可以降低信息管理成本，实现信息管理计算机化。


			
		

	





	

		

			

				
					
css 实现单行文本溢出隐藏

				
			

			

				

					08-11
				

			

		

		

			
				
要实现单行文本溢出隐藏，你可以使用CSS的`text-overflow`和`overflow`属性。下面是一个示例代码：

```html
<style>
  .single-line-text {
    white-space: nowrap; /* 不换行 */
    overflow: hidden; /* 溢出隐藏 */
    text-overflow: ellipsis; /* 文本溢出显示省略号 */
    width: 200px; /* 设置文本容器的宽度 */
  }
</style>

<div class="single-line-text">
  This is a long text that will be truncated if it exceeds the container width.
</div>
```

在上面的代码中，我们通过`.single-line-text`选择器来定义文本容器的样式。通过`white-space: nowrap`属性，我们阻止文本换行。使用`overflow: hidden`属性，我们将溢出的部分隐藏起来。最后，使用`text-overflow: ellipsis`属性，当文本溢出时，显示省略号来表明被截断。

你可以根据需要调整`.single-line-text`容器的宽度，以适应你的布局。这样，文本将会在超过容器宽度时被截断，并显示省略号。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值